Category Mega Drop Down Menu Help

I am trying to develop a mega category drop down menu and was wondering if someone could give some technical assistance.

I am happy with where I can get the code to call the category tree from, what I dont know about is how I can take this output and lay it out into a number of columns.

So lets take the exanded caegory side box as an example, if it was 50 items long, including both top cat and sub cats, how could I minipulate it so that it went down 10 itmes, and then moved to a column to the right hand side another 10 and so on..? is this possible?

I am looking at the following as a baseline for structuring the menu but basically the drop down I want to have all available cats and subcats in view but not all vertically..
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-########-css3-mega-drop-down-menu/

hope someone can help? perhaps this has been done already and I just cant find it? but I have searched and the only ones I have found are vertical ones :(

Anne from picaflor already has done the work for us,

http://www.picaflor-azul.com/index.php?main_page=document_product_info&cPath=27&products_id=15057

It looks like she also used the tutsplus dropdown as an inspiration ;)

sort of, but the categories are not as I described, if you lok at teh picture the category is vertical and you have to hover to get the sub cats.

I want all cats visible in the drop down and be able to decide how deep the columns go..?

I think that is described in the readme, or somewhere in the support thread here on the forum

nope :(

been through the readme and read allthe posts in the support thread below:
http://www.zen-cart.com/showthread.php?202140-Pure-CSS-Mega-Menu

i think someone was hinting tpwarss it but never was provided a solution other than to work it out lol

starting to understand the structure of the exampe she used, so assming Ann kept it all in the same format I think I may have a plan! :o)

philip937:

starting to understand the structure of the exampe she used, so assming Ann kept it all in the same format I think I may have a plan! :o)

Can you share how you worked this out.. I got the categories to display in columns, but when I hover the various categories, the column to the right of the one I am hovering "jumps" over to the left.. It's driving me absolutely bonkers..

This theme using megamenu: http://www.zen-cart.com/downloads.php?do=file&id=1397

DivaVocals:

Can you share how you worked this out.. I got the categories to display in columns, but when I hover the various categories, the column to the right of the one I am hovering "jumps" over to the left.. It's driving me absolutely bonkers..

Sorry DivaVocals,

Only just seen this, I really must subscribe to threads more!

Do you still need help with this? I managed to custome code it so I can set using sort order as to which category's go in which column if you are interested.

philip937:

Sorry DivaVocals,

Only just seen this, I really must subscribe to threads more!

Do you still need help with this? I managed to custome code it so I can set using sort order as to which category's go in which column if you are interested.

No worries.. I got my "jumping" issue sorted (some silly CSS thing I had neglected), but I would LOVE to see what you've done since it's next level of what I already did.. So do I want you to share????
Ummmmm YES!!!!:laugh: share share share share.. PURTY PLEASE!!!!:clap:

DivaVocals:

No worries.. I got my "jumping" issue sorted (some silly CSS thing I had neglected), but I would LOVE to see what you've done since it's next level of what I already did.. So do I want you to share????
Ummmmm YES!!!!:laugh: share share share share.. PURTY PLEASE!!!!:clap:

I'm away on business at the mo so don't have access to my computer but keep reminding me and ill grave the code for the category container and post it here for you. PM me if I go quiet and forget! :p

philip937:

I'm away on business at the mo so don't have access to my computer but keep reminding me and ill grave the code for the category container and post it here for you. PM me if I go quiet and forget! :p

I've got my eye on you now mister!!!:laugh: Consider me on OFFICIALY stalking duty..:laugh:

Seriously thanks.. :smile:

Tried to PM you something but your inbox is full ;)

philip937:

Tried to PM you something but your inbox is full ;)

WHAT??? Let me clear that out now..

as promised, here is what I use, pretty sure you shouldn't need anything else. messy I know but does the job.

I limit the number of categories by 8 in the sql query so if you don't want to just remove.

so to set categories into their columns just set their sort orders, so
sort order 1 = column 1
sort order 2 = column 2 etc

the code obviously doesn't suit all but I got it to do what I needed and so hopefully you can too. :)

enjoy

[PHP]<li><a href="#" class="drop">Browse Categories</a><!-- Begin 5 columns Item -->

<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<?php

$categories_tab_query = "SELECT c.categories_id, cd.categories_name, c.sort_order FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '0' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name LIMIT 0, 8;";
$categories_tab = $db->Execute($categories_tab_query);

$countthis = 1;
$columnnumber = 0;

echo '<div class="col_1">';

while (!$categories_tab->EOF)
{




$columnnumber = $columnnumber - $categories_tab->fields['sort_order'];

//if ($columnnumber < 0 && countthis == "1") {
//echo '<div class="col_1">';

if ($columnnumber < 0) {
echo '</div><div class="col_1">';
}


if((int)$cPath == $categories_tab->fields['categories_id'])
echo '<h3><a class="topcat" style="font-size:1em;" href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'">' . $categories_tab->fields['categories_name'];
else
echo '<h3><a class="topcat" style="font-size:1em;" href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'">' . $categories_tab->fields['categories_name'];
echo '</a></h3>';

$subcategories_tab_query="SELECT c.categories_id, cd.categories_name FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '".(int)$categories_tab->fields['categories_id']."' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name;";
$subcategories_tab=$db->Execute($subcategories_tab_query);
if($subcategories_tab->RecordCount()>0)
{
echo '<ul>';

while (!$subcategories_tab->EOF) {

$cPath_new='cPath=' . $categories_tab->fields['categories_id'] . '_' . $subcategories_tab->fields['categories_id'];
$cPath_new=str_replace('=0_', '=', $cPath_new);
echo '<li>'.'<a class="sub-cat" href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">'.$subcategories_tab->fields['categories_name'].'</a></li>';
$subcategories_tab->MoveNext();

}

echo '</ul>';
}


$columnnumber = $categories_tab->fields['sort_order'];

$countthis = $countthis + 1;

$categories_tab->MoveNext();
}

?>

</div>


</div><!-- End 5 columns container -->
[/PHP]

philip937:

as promised, here is what I use, pretty sure you shouldn't need anything else. messy I know but does the job.

I limit the number of categories by 8 in the sql query so if you don't want to just remove.

so to set categories into their columns just set their sort orders, so
sort order 1 = column 1
sort order 2 = column 2 etc

the code obviously doesn't suit all but I got it to do what I needed and so hopefully you can too. :)

enjoy

[PHP]<li><a href="#" class="drop">Browse Categories</a><!-- Begin 5 columns Item -->

<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<?php

$categories_tab_query = "SELECT c.categories_id, cd.categories_name, c.sort_order FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '0' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name LIMIT 0, 8;";
$categories_tab = $db->Execute($categories_tab_query);

$countthis = 1;
$columnnumber = 0;

echo '<div class="col_1">';

while (!$categories_tab->EOF)
{




$columnnumber = $columnnumber - $categories_tab->fields['sort_order'];

//if ($columnnumber < 0 && countthis == "1") {
//echo '<div class="col_1">';

if ($columnnumber < 0) {
echo '</div><div class="col_1">';
}


if((int)$cPath == $categories_tab->fields['categories_id'])
echo '<h3><a class="topcat" style="font-size:1em;" href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'">' . $categories_tab->fields['categories_name'];
else
echo '<h3><a class="topcat" style="font-size:1em;" href="'.zen_href_link(FILENAME_DEFAULT,'cPath=' . (int)$categories_tab->fields['categories_id']).'">' . $categories_tab->fields['categories_name'];
echo '</a></h3>';

$subcategories_tab_query="SELECT c.categories_id, cd.categories_name FROM ".TABLE_CATEGORIES." c, ".TABLE_CATEGORIES_DESCRIPTION . " cd WHERE c.categories_id=cd.categories_id AND c.parent_id= '".(int)$categories_tab->fields['categories_id']."' AND cd.language_id='" . (int)$_SESSION['languages_id'] . "' AND c.categories_status='1' ORDER BY c.sort_order, cd.categories_name;";
$subcategories_tab=$db->Execute($subcategories_tab_query);
if($subcategories_tab->RecordCount()>0)
{
echo '<ul>';

while (!$subcategories_tab->EOF) {

$cPath_new='cPath=' . $categories_tab->fields['categories_id'] . '_' . $subcategories_tab->fields['categories_id'];
$cPath_new=str_replace('=0_', '=', $cPath_new);
echo '<li>'.'<a class="sub-cat" href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">'.$subcategories_tab->fields['categories_name'].'</a></li>';
$subcategories_tab->MoveNext();

}

echo '</ul>';
}


$columnnumber = $categories_tab->fields['sort_order'];

$countthis = $countthis + 1;

$categories_tab->MoveNext();
}

?>

</div>


</div><!-- End 5 columns container -->
[/PHP]

You are awesome!!! Thanks for the share.. One question.. Am I reading this correctly.. If I set the category sort order to "1" it will appear in column 1?? It's THAT simple???????:shocking:

yup.

so if you want three categories in column 1, set them all with a sort order 1 and so on.. that way if you have categories with differnt amounts of sub cats you can fasin them in a way so they fill the drop down box nicely.

i dnt think it will work with negative values as sort orders though, just the way its coded.

philip937:

yup.

so if you want three categories in column 1, set them all with a sort order 1 and so on.. that way if you have categories with differnt amounts of sub cats you can fasin them in a way so they fill the drop down box nicely.

i dnt think it will work with negative values as sort orders though, just the way its coded.

Nice.. thanks for sharing!!!:D

Same principle I used for EZ-Pages Footer Columns, to sort links into columns. One refinement you might try (to be able to sort within columns) is to sort for columns by first digit of sort order. This allows up to 9 per column (with 2-digit sort orders) to be specifically organized within the column.

gjh42:

Same principle I used for EZ-Pages Footer Columns, to sort links into columns. One refinement you might try (to be able to sort within columns) is to sort for columns by first digit of sort order. This allows up to 9 per column (with 2-digit sort orders) to be specifically organized within the column.

Yup, I can attest this should work well (it does in the EZ-Pages Footer - thx for that module BTW). Doing it this way should also keep the categories sorted if you use one of the categories sideboxes ;)