Pure CSS Mega Menu

[picaflor-azul]

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.

Attachment 11821.

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: progidXImageTransform.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: progidXImageTransform.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: progidXImageTransform.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: progidXImageTransform.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

[jewelsnpearls]

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.

[gjh42]

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.

[heemu]

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

[picaflor-azul]

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

Have you tried the plugins section?

Thanks,

Anne

[simon1066]

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.

[gjh42]

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.

[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)

[picaflor-azul]

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

[wdkstudio]

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