CSS Dropdown menu for the header- With Categories!

[bluealice]

Hi, I uploaded the module & figured out how to customized the stylesheet, but am having problems with the menu titles that i cannot solve on my own:

http://www.musecards.com/store/

I know that more than one file is involved in fixing this, but being very new to ZC, i just dont' know which and how.

I spent the last couple of hours looking through tutorials, your Read Me files as well as many of the posts, but now i'm cross-eyed and terribly confused.

Please help...

Thanks,
Alice

PS: Also, if you can tell me how to get rid of that last blank box on the bar, i'd be very grateful...

[jettrue]

Hi, I uploaded the module & figured out how to customized the stylesheet, but am having problems with the menu titles that i cannot solve on my own:

http://www.musecards.com/store/

I know that more than one file is involved in fixing this, but being very new to ZC, i just dont' know which and how.

I spent the last couple of hours looking through tutorials, your Read Me files as well as many of the posts, but now i'm cross-eyed and terribly confused.

Please help...

Thanks,
Alice

PS: Also, if you can tell me how to get rid of that last blank box on the bar, i'd be very grateful...

You didn't upload all the files. Check that all of the language files were uploaded and are in the correct spot.

Use these instructions to spread out the menu bar (its not a blank box, its simply leftover space)

http://www.zen-cart.com/forum/showth...ths#post390897

[bluealice]

Great--thanks. That was the problem exactly.

Also took care of the extra space using the inst. from the other post you sent.

Thanks a million, Alice

[jettrue]

Great--thanks. That was the problem exactly.

Also took care of the extra space using the inst. from the other post you sent.

Thanks a million, Alice

The menu was messed up in firefox, and there were some issues with your css. The stylesheet_header_menu.css below should work better:

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D7DF92;}


/*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:#D7DF92;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D7DF92;}
*/
	
#dropMenuWrapper {
	width:70%;
	height:2.17em;
	margin-left:20px;
	margin-top:-30px;
	font-size:.9em;
	}
	
div#dropMenu {
  	width:100%;
  	margin-left:50px;
   	 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;
	height:2.17em;
	z-index:1000;
	}
	
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 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*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 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {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;}

[Beth-katherine]

1. Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php and remove the "class="submenu" from top-level items without sub items. So the contact us link would change to this:

<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>

2. Add this to the header_menu css file:
div#dropMenu li.submenu li.submenu {background: none;}

OR, you could use the image attached to have arrows pointing right to designate further subcategories, with this css:

div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;}

Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.

Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.

Beth-katherine

[jettrue]

Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.

Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.

Beth-katherine

Are you using my css drop down menu from the downloads section, or the one with "Paul's edition" in the name? Because there's no "horrible blue grey" in my version.

stylesheet_header_menu.css should be in the css folder, with all the other css files. (includes/templates/your_template/css)

Also PLEASE include your link to your site whenever you ask a question... its no fun trying to search for it.

[jettrue]

Hi. I also want to do this but can't find the "header_menu css file. Where is it located? I'm using Cherry Zen template if that helps.

Also, how do you change the color behind the drop down menu from the horrible blue grey it is now that you can't read. I prefer the color from Apple Zen but can't figure out WHERE the color is listed.

Beth-katherine

You are talking about the Category drop down menu, the support thread for that is here:

This thread is for the CSS dropdown menu, which is not a dropdown select menu.

http://www.zen-cart.com/forum/showthread.php?t=62197

To change the background color of the select menu, look for a section like this in your css:

input:focus, select:focus, textarea:focus

change the background color there. By the way, I don't think it's very polite to call it a "horrible color", especially since I designed it that way, along with the template.

[bluealice]

Hi, is it possible to place "end cap" images on each side of the CSS drop-down menu in order to create a "rounded" corners effect on the ends?

Like perhaps adding a cell on each end to hold a half-moon shaped .gif image?

[abebakker]

I installed the dropdown menu and it worked perfect.
But since I upgrade Internet Explorer 6 to Internet Explorer 7 I've a problem.

- ZenCart 1.3.7
- DropdownMenu 1.3

The dropdown menu works fine in Firefox and IE6

There is a problem with DropdownMenu in IE7:
The menu shows empty submenu's if you move your mouse over the menu and drop down some levels, then move your mouse out of the menu and back on the toplevel. I hope you understand this explanation.

Just to be clear I will try to make a Screenprint and post it.

I see this problem also on the apple zen example site and other site's that use the DropdownMenu.

Does anyone know how to fix this.
Thanx.

[Beth-katherine]

You are talking about the Category drop down menu, the support thread for that is here:

This thread is for the CSS dropdown menu, which is not a dropdown select menu.

http://www.zen-cart.com/forum/showthread.php?t=62197

To change the background color of the select menu, look for a section like this in your css:

input:focus, select:focus, textarea:focus

change the background color there. By the way, I don't think it's very polite to call it a "horrible color", especially since I designed it that way, along with the template.

So sorry to offend, was not my intention it's just after several hours of fruitless searching through the forum on how to change the color with no results my frustration came through my question.

Thank you for answering me, and as I said I do like the color of the css drop down on your Apple Zen - very easy to read. The blue is hard on older eyes.

Beth-Katherine