CSS Dropdown menu for the header- With Categories!

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...

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...

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/showthread.php?p=390897&highlight=percentage+widths#post390897

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

:smile:

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

:smile:

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;}

jettrue:

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

Beth-katherine:

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.

Beth-katherine:

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.

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?

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.

jettrue:

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

Jettrue-

Is it possible to add a time-delay to the menu?

For example, our store has many sub-categories and sometimes it is frustrating if the mouse "slides" accidentally off one, to start over branching from the top level.

A 2-second or so delay before the menu resets would solve this.

Is this possible?

Thank you for your time -

Benjamin

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.
This is a known issue, and I haven't been able to find a resolution to it. So you have to decide whether or not you can live with the issue. Sorry!

bdekraker:

Jettrue-

Is it possible to add a time-delay to the menu?

For example, our store has many sub-categories and sometimes it is frustrating if the mouse "slides" accidentally off one, to start over branching from the top level.

A 2-second or so delay before the menu resets would solve this.

Is this possible?

Thank you for your time -

Benjamin

Nope, that would have to be done with a javascript menu; this one is css only. :cool:

jettrue:

This is a known issue, and I haven't been able to find a resolution to it. So you have to decide whether or not you can live with the issue. Sorry!

Thanx for the fast reaction. Then I have to live with it.

Jettrue,

I thought I had this nice menu all worked out, aside from playing with the spacing and widths for different browsers, but then I tried it with IE 5.5 and IE6 and the drop downs do NOT work at all. Only the level 1 menu is active.
I know that IE6 and earlier do not support the :hover pseudo class and I suspect that this is the problem. I don't think I want to start rewriting the code to include the Suckerfish javascript. What do you think?
Latest W3Schools stats say that IE6 is about 50% of the browsers. Yikes!
Maury

mauryg:

Jettrue,

I thought I had this nice menu all worked out, aside from playing with the spacing and widths for different browsers, but then I tried it with IE 5.5 and IE6 and the drop downs do NOT work at all. Only the level 1 menu is active.
I know that IE6 and earlier do not support the :hover pseudo class and I suspect that this is the problem. I don't think I want to start rewriting the code to include the Suckerfish javascript. What do you think?
Latest W3Schools stats say that IE6 is about 50% of the browsers. Yikes!
Maury

Did you upload includes/csshover.htc? Did you make your additions to .htaccess? I didn't create a menu that wouldn't work in ie6. :smile:

The answers to your questions are yes, yes and yes.
I did read the readme...
I added the csshover.htc file to the root/includes/ directory...
I added the lines to .htaccess in the root/includes/ directory...
Since I have IE7 installed as my IE browser, I am running separate "standalone" copies of IE6 and IE5.5 (https://www.tredosoft.com), but I don't think this is the cause of the problem. I felt sure you had tested the menu in IE6 and I just don't understand what happened. I am using "CSS Flyout Header for Zen Cart 1.3.* v1.2". :frusty:
I will PM you a link to the website since it is not open to the public yet.
As always, thanks for your help and the rapid response.

Maury

mauryg:

The answers to your questions are yes, yes and yes.
I did read the readme...
I added the csshover.htc file to the root/includes/ directory...
I added the lines to .htaccess in the root/includes/ directory...
Since I have IE7 installed as my IE browser, I am running separate "standalone" copies of IE6 and IE5.5 (https://www.tredosoft.com), but I don't think this is the cause of the problem. I felt sure you had tested the menu in IE6 and I just don't understand what happened. I am using "CSS Flyout Header for Zen Cart 1.3.* v1.2". :frusty:
I will PM you a link to the website since it is not open to the public yet.
As always, thanks for your help and the rapid response.

Maury

You removed this from your stylesheet_header_menu.css:

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

You're menu also wraps onto two lines in Firefox, you may want to increase the width from 55 em a bit.

:oops:

As usual your reply was timely and spot on. I have no idea how or why I removed those lines from the CSS file. Thanks.

I still need to play with the widths. I'm seeing some funny results, especially if the user changes the font size using CNTL+ or CNTL-.

Maury

mauryg:

:oops:

As usual your reply was timely and spot on. I have no idea how or why I removed those lines from the CSS file. Thanks.

I still need to play with the widths. I'm seeing some funny results, especially if the user changes the font size using CNTL+ or CNTL-.

Maury

I sent you a pm with some suggestions for css adjustments.