Pure CSS Mega Menu

Yep Thats what i have been trying

http://grumpykiwi.com/index.php?main_page=index

On my test site, i have been trying to make the menu wide enough for the Category "Boris eugene Bunny the third->" to fit on one line, however no matter what i do the text stays the same width even if the body of the drop down is wider.

nigelt74:

Yep Thats what i have been trying

http://grumpykiwi.com/index.php?main_page=index

On my test site, i have been trying to make the menu wide enough for the Category "Boris eugene Bunny the third->" to fit on one line, however no matter what i do the text stays the same width even if the body of the drop down is wider.

You can add this to the stylesheet_mega_menu.css file:

.mega-menu .levels li a{width:your new width;}

Thanks,

Anne

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.

gameoverbeyond:

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.
OK, I've made significant progress. I now have the next tab showing and it is populating with a parent category. I edited the headermenu.php to call up the next "tab" with its title, I linked this through the tpl_mega_menu.php by copying the the categories portion into another tab and linking it to a renamed copy of my categories_ul_generator. I did determine in order to have a second file, the "zen_categories_ul_generator" instances had to be renamed for each file you would want to add. However, I still can't figure out how to filter the files in the categories_ul_generator.php to show only wanted categories and sub. I'm close, just not quite there. Below is some of the coding I changed highlighted:

headermenu.php

/bof categories definitions/
define('HEADER_TITLE_CATEGORIES','Systems');

/bof 3DO/
define('HEADER_TITLE_3DO','3DO');

/bof manufacturers definitions/
define('HEADER_TITLE_MANUFACTURERS','Shop by Brand');

tpl_mega_menu.php
Line 68

    <li class="submenu 3do-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_3DO; ?></a><!-- bof 3DO    -->
 
        <div class="dropdown_1column">
            <div class="col_1 firstcolumn">
               <div class="levels">
                   <?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator_3do.php');
$zen_CategoriesUL = new zen_categories_ul_generator1;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</div>
</div>
</div>
</li><!-- eof 3DO -->

categories_ul_generator.php
Line 24
class zen_categories_ul_generator1 {
var $root_category_id = 87, <---THIS GETS ME THE PARENT CATEGORY WITH SUB-CAT
$max_level = 0,
$data = array(),
$parent_group_start_string = '<ul%s>',
$parent_group_end_string = '</ul>',
$child_start_string = '<li%s>',
$child_end_string = '</li>',
$spacer_string = '
',
$spacer_multiplier = 1;

var $document_types_list = ' (3) ';
// acceptable format example: ' (3, 4, 9, 22, 18) '

function zen_categories_ul_generator1($load_from_database = true)

gameoverbeyond:

Hi Ann,
Love the add on. I'm using this on a test site and would like to change the "Categories" tab to only include certain categories. I'll create a second tab to display the rest. I figured out how to show the second tab of categories, but I'm having difficulty getting the box to populate. I've searched the forums and I keep seeing to check the "categories_ul_generator.php". I checked this file but I have no idea what I'm looking at. How would I edit this to pull only certain categories? I'm assuming that I can copy this file and rename it to generate the contents of the second tab I'd like to create once modified. Any Help, guidance, or a link to figure out how to modify this files coding would be great.

This will take some custom programming. You can start by looking at the includes/templates/your_template/common/tpl_mega_menu.php file and the categories_ul_generator.php.

Thanks,

Anne

My guess would be that it would be easier and less processing to just run categories_ul_generator once, and limit the portion of its results that is output for each tab. Find the base iterator (the variable that is incremented to step through the result) and stop it at a certain number for the first tab, then start it at the next number for the second tab. You may be able to determine the correct number by evaluating the current categories id in the result and comparing it to the id of the category where you want to start the second tab.

It might also work to do an array_split or something like that, dividing the result into two separate result sets at a desired breakpoint. A little PHP research may be in order here...

It looks like array_chunk() or something based on it will be the way to accomplish the second method above.
http://us1.php.net/manual/en/function.array-chunk.php
If the second set of results is larger than the first, it will be cut up as well into pieces no larger than the first. So care will be required when using this. Also, the result might be an "iterable object" and not a "true array", in which case you would need to use a function described in the comments below it.

Hi Anne,
In the mega-menu I have an annoying issue: when I select a subcategory the parent category stays selected (as I want it) and it takes the properties of the main menu when selected (in my case: white to azure, black text). But the text is moved to the left side, so it touches the edges.

Whatever I tried, I cannot get the text in the right position - any change I make that works on these parents, also works on the top level - and that big fat headline moving back and forth 3 px is totally annoying.

I've tried changing the output of the categories generator, but I simply don't know which class or div they are...
Please check the image. I also add the adjusted stylesheet. can you help me out? What I would really like is to make the parent link (but not the head) pink.
Can you help me out? Any help is appreciated!

Just in case the problem is not clear: the parents jump 3 px to the left side, they do not align with the non-selected (and also not with the hovering) text.

.

The stylesheet:

#mega-wrapper {width: 1048px;/change this to the width of your site/margin:0 auto;display:block;position: relative;z-index:9999;
margin-bottom:1em; top:-2em;}
#mega-wrapper .mega-menu {padding-left: 10px; width: 1012px;/set this width to your site width minus 40px/
background: White;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='WhiteSmoke'); /* for IE */
background: -moz-linear-gradient(top, White, WhiteSmoke);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(WhiteSmoke));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

list-style:none;margin:30px auto 0px auto;height:30px;padding:0px 10px 0px 10px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:10px;margin-top:2px;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background: azure; border:1px solid WhiteSmoke;margin-right:6px;}
.mega-menu li a {color: black /was White/;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a {color:#444;position:relative;z-index:11;padding: 4px 11px 3px 11px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {font-family:'Montserrat', Arial, Helvetica, sans-serif;padding-right:16px;}
.mega-menu li:hover .drop {padding-right:19px;}
.infoMenu :hover {background: green; color:white;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles /
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {
margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;padding:10px;text-align:left;margin-top: 1px;background: pink;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); / for IE */
background: -moz-linear-gradient(top, Azure, White);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(Pink));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

}
.mega-menu .dropdown_1column {width: 148px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 490px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

.mega-menu li:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, white, Azure);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(Azure));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;}

/* bof drop down on mouse hover right aligned /
.mega-menu li .align_right {/-moz-border-radius: 20px 0px 20px 20px;-webkit-border-radius: 20px 0px 20px 20px;border-radius: 20px 0px 20px 20px;*/}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:148px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:485px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown /
.mega-menu .firstcolumn {margin-left: 0; / Clearing margin & left */clear: left;}

/bof content/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:18px;line-height:21px;text-align:left;color:#d85d60;}
.mega-menu p {font-size:14px; font-family:'Rambla';line-height:18px;margin:0;margin-bottom:10px;color:#444;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid black;margin-top:7px;color:#444;}
.mega-menu h2 {font-size:24px;margin-bottom:18px;padding-bottom:11px;font-weight:normal;}
.mega-menu h3 {font-size:16px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}
.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {padding:4px;border:0px solid black;margin-top:5px;margin-left:20px;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:15px;font-family:'Rambla', Arial, Helvetica, sans-serif;line-height:24px;position:relative;padding-left:3px;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;font-weight:normal;text-transform:none;color:#444;}
.mega-menu li ul li:hover {/background:none;/border:none;padding:0;margin:0;}

/* bof 2 levels drop down /
.mega-menu .levels, .mega-menu .levels ul {/ all lists /padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/ second-level lists*/ position: absolute;border:0px solid #444;background: #efefef;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(white));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;top:-21px;margin:15px 0px 0px 4px;padding:6px;left: -999em;
}

.mega-menu .levels li ul ul {top:-21px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 147px;}

/bof menu colors/
.menu_red {background: White;height:45px;}
.menu_red li:hover div a {color:#444;}
.menu_red li:hover div a:hover {background-color:#990000;text-decoration:none;background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}

/.menu_red li ul li a:hover, .menu_red li selected a {background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}/

/bof customer service/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

.down2 {position:relative; top: 3px; padding-right:10px;}

Fawnalloday:

Good day!
recently saw The required information is scattered across very different sources, and we have to spend half the evening for the transition to reference the necessary sites. And here all the instructions you need on a single resource . Try it!
I found hereEveryone has different tastes, but I really liked the site !
Do not waste your precious time , try it now!
Good luck!

how is it that someone that has only posted once can spam the forum with anchor links! Pi55 off loosers

gjh42:

It looks like array_chunk() or something based on it will be the way to accomplish the second method above.
http://us1.php.net/manual/en/function.array-chunk.php
If the second set of results is larger than the first, it will be cut up as well into pieces no larger than the first. So care will be required when using this. Also, the result might be an "iterable object" and not a "true array", in which case you would need to use a function described in the comments below it.

Thank you for posting. This is a great help :-)

Thanks,

Anne

jewelsnpearls:

Hi Anne,
In the mega-menu I have an annoying issue: when I select a subcategory the parent category stays selected (as I want it) and it takes the properties of the main menu when selected (in my case: white to azure, black text). But the text is moved to the left side, so it touches the edges.

Whatever I tried, I cannot get the text in the right position - any change I make that works on these parents, also works on the top level - and that big fat headline moving back and forth 3 px is totally annoying.

I've tried changing the output of the categories generator, but I simply don't know which class or div they are...
Please check the image. I also add the adjusted stylesheet. can you help me out? What I would really like is to make the parent link (but not the head) pink.
Can you help me out? Any help is appreciated!

Just in case the problem is not clear: the parents jump 3 px to the left side, they do not align with the non-selected (and also not with the hovering) text.

.

The stylesheet:

#mega-wrapper {width: 1048px;/change this to the width of your site/margin:0 auto;display:block;position: relative;z-index:9999;
margin-bottom:1em; top:-2em;}
#mega-wrapper .mega-menu {padding-left: 10px; width: 1012px;/set this width to your site width minus 40px/
background: White;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='WhiteSmoke'); /* for IE */
background: -moz-linear-gradient(top, White, WhiteSmoke);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(WhiteSmoke));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

list-style:none;margin:30px auto 0px auto;height:30px;padding:0px 10px 0px 10px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:10px;margin-top:2px;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background: azure; border:1px solid WhiteSmoke;margin-right:6px;}
.mega-menu li a {color: black /was White/;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a {color:#444;position:relative;z-index:11;padding: 4px 11px 3px 11px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {font-family:'Montserrat', Arial, Helvetica, sans-serif;padding-right:16px;}
.mega-menu li:hover .drop {padding-right:19px;}
.infoMenu :hover {background: green; color:white;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles /
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service,
.mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {
margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;padding:10px;text-align:left;margin-top: 1px;background: pink;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); / for IE */
background: -moz-linear-gradient(top, Azure, White);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(Pink));-moz-box-shadow:0 8px 6px -6px black, 0px 2px 1px 1px #aaa;-webkit-box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;box-shadow:0 8px 6px -6px black,0px 2px 1px 1px #aaa;

}
.mega-menu .dropdown_1column {width: 148px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 490px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

.mega-menu li:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, white, Azure);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(White), to(Azure));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;}

/* bof drop down on mouse hover right aligned /
.mega-menu li .align_right {/-moz-border-radius: 20px 0px 20px 20px;-webkit-border-radius: 20px 0px 20px 20px;border-radius: 20px 0px 20px 20px;*/}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:148px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:485px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown /
.mega-menu .firstcolumn {margin-left: 0; / Clearing margin & left */clear: left;}

/bof content/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:18px;line-height:21px;text-align:left;color:#d85d60;}
.mega-menu p {font-size:14px; font-family:'Rambla';line-height:18px;margin:0;margin-bottom:10px;color:#444;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid black;margin-top:7px;color:#444;}
.mega-menu h2 {font-size:24px;margin-bottom:18px;padding-bottom:11px;font-weight:normal;}
.mega-menu h3 {font-size:16px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}
.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {padding:4px;border:0px solid black;margin-top:5px;margin-left:20px;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:15px;font-family:'Rambla', Arial, Helvetica, sans-serif;line-height:24px;position:relative;padding-left:3px;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;font-weight:normal;text-transform:none;color:#444;}
.mega-menu li ul li:hover {/background:none;/border:none;padding:0;margin:0;}

/* bof 2 levels drop down /
.mega-menu .levels, .mega-menu .levels ul {/ all lists /padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/ second-level lists*/ position: absolute;border:0px solid #444;background: #efefef;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Azure', endColorstr='White'); /* for IE */
background: -moz-linear-gradient(top, Azure, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(Azure), to(white));-moz-box-shadow: 0px 2px 1px 1px #aaa;-webkit-box-shadow:0px 2px 1px 1px #aaa;box-shadow:0px 2px 1px 1px #aaa;top:-21px;margin:15px 0px 0px 4px;padding:6px;left: -999em;
}

.mega-menu .levels li ul ul {top:-21px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 147px;}

/bof menu colors/
.menu_red {background: White;height:45px;}
.menu_red li:hover div a {color:#444;}
.menu_red li:hover div a:hover {background-color:#990000;text-decoration:none;background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}

/.menu_red li ul li a:hover, .menu_red li selected a {background-color:#990000;color:White;text-decoration:none;padding-left:6px;right:3px;}/

/bof customer service/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

.down2 {position:relative; top: 3px; padding-right:10px;}

If you post a link to your site I can take a look.

Thanks,

Anne

Hi Anne, it's not a live shop, it's still in the wamp.
Since you made the module, I was hoping you know which div or class controls the display of the parents of a selected sub(sub)(sub) category. It's apparently generated by the module, but I have no clue as to how that works and how to adjust the output of that.

Rather than have to re-control the parents after your style change, you should specify a selector set that limits the effect to the sub-sub-subcats to begin with. The nested lists have classnames like .level2, .level3, level4, so you could use whichever of those is appropriate as part of the selector to give the desired specificity.

Where can download the better categories for side boxes version 1.5.1?

heemu:

Where can download the better categories for side boxes version 1.5.1?

Have you tried the plugins section?

Thanks,

Anne

GumboStandards:

Forgot to mention in the above instruction set that the HTML output of mega menu will now be placed at the bottom of the HTML source code of any page on your site using the mega menu. IOW, the mega menu will continue to appear at or toward the top of the page in your browser but to searchbots all content within the mega menu will be scanned (almost) last.

Must admit I've never thought of doing this. As a trial I've put my header (and so the code) at the bottom of tpl_main_page and css-positioned it back to its original position.

Not sure what hidden consequences there might be - if it's that good why doesn't zencart do it already?

I'll need to think about it some more before applying it to a live site.

if it's that good why doesn't zencart do it already? Because it depends on the elements above it being a fixed size (never changing height), and individual users correctly setting CSS properties. In other words, two major factors that cannot be relied on to always be true. This would be a support nightmare with novices crying that Zen Cart is all messed up.

Hi gjb42,
I'm just yellow-white belt yet... can you push me a little further in the right direction? I have two places in my CSS that incur the blend from White to Azure, and if I change anything there it either works on the headers upon selecting them, or not at all (at least not noticable)

jewelsnpearls:

Hi gjb42,
I'm just yellow-white belt yet... can you push me a little further in the right direction? I have two places in my CSS that incur the blend from White to Azure, and if I change anything there it either works on the headers upon selecting them, or not at all (at least not noticable)

If you post a link to your site I can take a look.

Thanks,

Anne

nigelt74:

OK, ignore my post, as soon as i posted and went back i saw my error, i was editing the wrong file

All i had to do was change this function in my cloned categories_ul_generator.php which I had called categories_ul_generator_bb.php, by adding the line in red to limit it to only my selected category and its kids

function buildTree($submenu=false)
{[color=red]$root_category_id = 113;[color/]
    return $this->buildBranch($this->root_category_id, '', $submenu);
}

Hi Nigel

I am attempting to achieve a split categories menu and was interested in how you achieved this. I cannot find this query in the categories_ul_generator.php, and wondered whether you could either post the whole revised categories_ul_generator.php file or alternatively message me. Thank you

WDK