CSS Dropdown menu for the header- With Categories!

[first trading]

Link to your site ...

[tor86]

Hey sorry it's - 'n o to r i o u s d e s i g n . c o . u k/dr.um' (ignoring the spaces)

I can't keep it in it's messed up state for long though or my client will start to panic

[first trading]

Which add-ons have you installed.

First i would look at the add-ons you've installed and then check to see if any of them share the same files as the drop menu add-on.

If they do you will have to merge those files instead of just copying over them.

[tor86]

Hi,

Modules I have installed are:

- Ask A Question
- Lightbox
- News & Articles
- Tabbed Products Pro
- Column Grid Layout for product listing

There may be some others but I can't remember :S I'm also using the Pure_Black theme.

I've just tested it using a different theme and it worked! so your right it must be a module. I have no idea how to find out which though :S

[tor86]

argh nevermind I solved it, I'd copied one of the files to the wrong folder...

thanks for the help anyway :)

[first trading]

You posted before i could get back. Nice to hear you got it sorted.

[marcelarr]

Hey all,

Love this addon, and I've got a pretty good grip on how to mod it to my liking, however I'm having one slight problem that I'd like to fix if possible.

When you highlight a Top Level Categiry in the Drop down menu, and the submenus appear, you can set it so that a different color appears using :hover

I want to make it so that the Top Level Category color remains the same as it is when you hover over it, while that specific drop down submenu is open.

Hopefully I explained that well enough,
Any questions to help clear what I'm looking for up, let me know.

Appreciate any and all ideas for this.

Cheers,
Ravyn

I did this, you should give it a go.


body {
behavior: url(includes/csshover.htc);
}

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {background-image: url(../images/main_sidebox_right.gif)!important;background-image: url(../images/main_sidebox_right.gif);}


/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

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%;
*width:16.649%;
}

div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:center;
background-image: url(../images/main_sidebox_right.gif);
background-repeat: repeat-x;
padding: 0px;
z-index:1000;
float:left;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:center;
border-right:1px solid #ffffff;
}

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.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;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 {position: absolute; width: 12em;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-image: url(../images/main_sidebox_right.gif);
background-repeat: repeat-x;
padding: 0px;
z-index:1000;
float:left;
}
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 {background-image: url(../images/main_sidebox_right.gif);
background-repeat: repeat-x;}

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}

[atl2rva]

I am working on a new site. This is going to be a "Showcase no prices" site. I have my store status set to 1, but the drop down menu still shows the "Shopping Cart" link at the top. I tried to comment this out in the tpl_drop_menu but all it did was remove the text. Would appreciate any help.

[first trading]

I am working on a new site. This is going to be a "Showcase no prices" site. I have my store status set to 1, but the drop down menu still shows the "Shopping Cart" link at the top. I tried to comment this out in the tpl_drop_menu but all it did was remove the text. Would appreciate any help.

Find and delete this from, includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<ul>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
</ul>
</li>
<?php } else { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>

It might not look exactly like this as i have changed some things, but i think its pretty much the same. You can see the relevant things here to delete.

[tor86]

Hi again,

I'm having a small problem with one of the level styles. I chose a separate level for my home button, so that I could align the submenu to stop it overlapping the edge of my site, after I centered the rest under the buttons. This now works, except for some reason the Home submenu is taking on the style of level1, which is creating excess padding and capitalizing the text. I've double checked everything and it seems correct. Any help appreciated! :)

My url is - n o t o r i o u s d e s i g n . c o . u k / d r . u m (without the spaces)

here's my problem code at the moment..


div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1;
position:relative;
}
.dropnav-right {
background:url("../images/topnavrightbg.jpg");
height:62px;
margin-right:-9px;
float:right;
width:106px;
z-index:2000}

.dropnav-left {
background:url("../images/topnavleftbg.jpg");
float:left;
height:62px;
margin-left:-12px;
width:24px;
z-index:2000;}

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

div#dropMenu li {
position:relative;
list-style:none;
margin-left: -5px;
float:left;
line-height:1em;
width:11.5%;
*width:11.5%;
}

div#dropMenu ul.level1 {
width:91%;
margin:-62px 0 0 12px;
text-align:center;
background:url("/dr.um/includes/templates/pure_black_free/images/navbar.jpg"); /*background of top menu when NOT selected. */
z-index:-1000;
height:62px;
float:left;
}

div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: 2.3em 0;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:center;
font-size: 9pt;
}

div#dropMenu li.submenu2:hover {
background:url("/dr.um/includes/templates/pure_black_free/images/hoverstate.jpg");
height: 62px; }


/*div#dropMenu li.submenu {background: url(../images/hoverstate.jpg) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {background: url(../images/hoverstatemenu.jpg); height:62px; no-repeat;}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
div#dropMenu li.submenu li.submenu {background: #333;}
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.level1 li.submenu:hover ul.level6,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 8em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#4f4f4f;z-index:1000;position:absolute;left:-10px;}
div#dropMenu ul.level6 {background:#4f4f4f;z-index:1000;position:absolute;left:-2px;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a, ul.level6 a {background:#4f4f4f; padding: 0.8em 0 0.8em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */

div#dropMenu ul.level2 a:hover, ul.level6 a:hover {color:#fff; background:#ff9e2a;}