CSS Dropdown menu for the header- With Categories!

[saher.alsous]

Hi there, got issues with the menu, it seems to be conflicting with the greybox mod i have applied. when the greybox is activated, the menu seems to sit infornt of the image, instead of behind it. how can i go about fixing this???

thanks Jas :)

change the Z-index of the menu to be lower than the image, or the z-index of the image to be above 1000

[jettrue]

That's why I posted in this thread. The problem I'm having is with the CSS dropdown menu this thread is about. I installed it, tried to add/change a few of the menu listings at the top, and now the presentation is showing incorrectly. It seems to have to do with removing the drop down menus. When I replace the original code, it works. When I remove the drop down menus, it creates the incorrect spacing.

Can someone that's familiar with this mod help me out?

Are you using the newest version of this mod?

Anyhoo, replace your stylesheet_header_menu.css with this code:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f310a!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%;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#4F3212; /*background color of top menu when NOT selected. */
	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:#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;}

You'll also need to open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

and change your cart link to this:

<li class="submenu"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>

Then your cart link won't have a white line at the end.

Sorry I was so slow to reply.

[maraud]

I installed the plugin but nothing shows up in the menu, except for the brown background color. Can someone advice how to fix this?

[jettrue]

I installed the plugin but nothing shows up in the menu, except for the brown background color. Can someone advice how to fix this?

Link Please?

[maraud]

Link Please?

www.denasha.com

You can see the brown bar at the top but no menu shows up

[jettrue]

www.denasha.com

You can see the brown bar at the top but no menu shows up

You're using the "Paul's Edition" version of the mod, which I did not develop. But be sure that all files are uploaded in the correct places, and try adding some categories and products. "Paul's Edition" is designed to only show categories across the top, whereas mine has all the other links like as you see at http://www.zencart137.jadetrue.com.

[maraud]

The layout has got

Home | Categories | Information | Contact Us


What if i wanted the menu to feature categories laid out this way


Category 1 | Category 2 | Category 3 |

subcategory of 1
subcategory of 1


So that, the top-level categories are laid out horizontally and are immediately viewable, and when someone hovers over the top-level, then the subcategories are viewable.

And if that's possible, how do i disable items in the menu such as "Information, Contact Us, My Account, Shopping Cart" ?

[jettrue]

The layout has got

Home | Categories | Information | Contact Us


What if i wanted the menu to feature categories laid out this way


Category 1 | Category 2 | Category 3 |

subcategory of 1
subcategory of 1


So that, the top-level categories are laid out horizontally and are immediately viewable, and when someone hovers over the top-level, then the subcategories are viewable.

And if that's possible, how do i disable items in the menu such as "Information, Contact Us, My Account, Shopping Cart" ?

You originally had "Paul's Edition" installed, which did exactly what you were looking for, all you had to do was add categories.

[saher.alsous]

Hi there...

could anyone tell me what is the solution for the header bar when it goes up on firefox?

i installed the menu and it worked very great, but i had the header of my website where you can find Home Log In, going up,, so i just want to fix it , i looked over here and i was lost, honestly.

can you give me a link to the solution or tell me how to do it??

best regards

saher

[maraud]

You originally had "Paul's Edition" installed, which did exactly what you were looking for, all you had to do was add categories.

How do you add categories? Is it done in one of the files that are uploaded or from the admin side?