CSS Dropdown menu for the header- With Categories!

OK, I got the sideboxes issue worked out, but I've been trying to modify the header and footer...and seem to have misaligned both of them.

How can I restore what was there? I was trying to add a few custom links to the top menu, but when I do that, it skews them in IE (in mozilla, they show up fine).

And the footer, I was adding some custom text, and even though it screwed up the alignment, when I recopied the initial file over, it still didn't work.

Can anyone take a look and see what they recommend?

http://www.zyliedesigns.com

thanks

It seems to be the size of the header. The tag is showing it way too small to stretch the width of the browser in firefox, but showing it way too big in ie. What should the setting be to force it to the size of the header itself?

Sounds like a good time to start getting familiar with:
Admin > Tools > Developers Tool Kit

Easiest method to start with is to look at the HTML source of the page you want to edit. Find the 'id' or 'class' of where you want to edit. Copy it and then, in the last input box on the Developers Tool Kit page, enter or paste it, choose Catalog in the next input box, then use the 'search' button.

Learning how to use this now will speed up your customizing and help you to understand how Zen Cart works.

No, I know how to use the toolkit, and I usually edit the files directly in Dreamweaver. My issue is not finding the correct file to edit, but rather how to set the CSS to show the top menu both stretched all the way across the site, and show it correctly in both browsers.

I know which class it is, and which value it's assigned in the stylesheet, but the settings I'm putting in aren't adjusting it correctly.

Hi

Are you using Jetrue's contrib??

I think you might be using Paul's edition, which puts the categories across the header.

See this post:
http://www.zen-cart.com/forum/showpost.php?p=473742&postcount=715

Craig

I used the version Jettrue uploaded. No changes per pauls edition.

OK, if you are familiar with using the Developers Tool Kit then you would know that "your header.php & your stylesheet.css" files are the ones needing editting and, knowing the "id" and/or "class", where to make the changes.

Didn't know you were using a Mod for the Header so not sure how that affects settings nor the two files mentioned above. Might explain though, why the Font size is so small in IE and would definitely explain why your Navigation Menu is not displaying properly.

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?

The person to help you best is obviously Jettrue, however he seems to be absent at the moment (Hope everything is OK).

I've had a look at the css and it looks OK. However if you've made major adjustments to the 'tpl_drop_menu.php' it might be best if you post the code here.

Craig

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

d1driftbiz:

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

shelshell:

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.

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

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?

Link Please?

jettrue:

Link Please?

www.denasha.com

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

maraud:

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.

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" ?

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" ?
You originally had "Paul's Edition" installed, which did exactly what you were looking for, all you had to do was add categories.

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

jettrue:

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?