CSS Dropdown menu for the header- With Categories!

[mauryg]

Hi JetTrue,

I'm ready to download your mod as all accounts seem to be great, but I wanted to confirm if it is tied to the admin panel to automatically load the categories/subcategories as they are edited, or if we'll need to go in and edit a separate file. Obviously, the categories won't change too much, but I'd love to hear that your menu automatically updates if a change is made in the admin panel.

TracNez411

As a user I can confirm for you that the menu will follow all changes you make to categories, subcategories, etc via the Admin panel, including additions, deletions and name changes. Enjoy it!

Maury

[jettrue]

Do you think it would be possible to redo the CSS and maybe the template so that the subcategories (level 2 and lower) were listed in one or more horizontal rows rather than a vertical column?

Maury

that is not in my plans, but if someone else wants to figure out something like that, that would be great!

[all4coffee]

Try searching this thread for "lightbox".

Should sort out your problem. Let us know how you get on.

Craig

Craig,

since my problem was not with a lightbox but with HoverBox I located my hoverbox stylesheet and changed the z-index setting from 100 to 1000 so it now reads like this:

#hoverbox{
position: absolute;
left: 0;
width: 100%;
z-index: 1000;
text-align: center;
line-height: 0;
}

Thank you so much for your help! Worked like a charm. This forum is the best.

[crinolina]

hi
how i can get rid of the gap betwen menu levels?
http://lifebaby.freehostia.com/gap.html


HELP ME PLEASE
Thanks you!

[CES]

Can we see a link to your store or the contents of your css file?

Craig

[crinolina]

http://lifeconstruct.freehostia.com

and this is the stylesheet_header
body {
behavior: url(includes/csshover.htc);
}

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}



div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0;
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:16.667%;
}

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background:#4f4f4f;
z-index:1000;
float:left;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {position: absolute; width: 8em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:8em;z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

thank you!!!!

[mundi]

how would i go about adding the other menu as shown at http://makeupconnection.com where it says specals featured whats new show all, and home login help community? i have read through about 30 pages and gave up lol, sorry. i wasnt sure if these were mods availale for download, or if the code is posted somewhere here. any help would be great!

[CES]

http://lifeconstruct.freehostia.com

div#dropMenu ul ul {position: absolute; width: 8em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:8em;z-index:1000;}
div#dropMenu ul.level8{top: 0; left: 12em; background:#4f4f4f}

You have two '8em' and one '12em' in the above lines.

Make them all them same (8 or 12). I use 12em.

Let us know how you get on.

Craig

[CES]

how would i go about adding the other menu as shown at http://makeupconnection.com where it says specals featured whats new show all, and home login help community? i have read through about 30 pages and gave up lol, sorry. i wasnt sure if these were mods availale for download, or if the code is posted somewhere here. any help would be great!

I do believe that site uses this 'similar (Paul's Edition)' drop down menu for the products:
http://www.zen-cart.com/index.php?ma...roducts_id=523

I do not know about the links you describe above.

I presume it is a bespoke design of the header.

You could try contacting TooLateSmart.

Craig

[jettrue]

how would i go about adding the other menu as shown at http://makeupconnection.com where it says specals featured whats new show all, and home login help community? i have read through about 30 pages and gave up lol, sorry. i wasnt sure if these were mods availale for download, or if the code is posted somewhere here. any help would be great!

Yes, that site is using the "Paul's Edition", where the categories are shown in the drop down menu, with each category being a drop down. As far as the specials and such, that is not part of the mod, and something he added on his own.