CSS Dropdown menu for the header- With Categories!

[jettrue]

Uploaded:

includes/templates/WR/common/tpl_drop_menu.php

includes/modules/sidenboxes/WR/ezpages_drop_menu.php

WR = YOUR_TEMPLATE

Thanks, Tatiana

I'm assuming your above "sidenboxes" is just a typo, and its actually uploaded to a folder named "sideboxes"?

[tatiana77]

yup a typo, I'm sorry...

[sbonge]

I have read until my eyes are falling out. Sorry if this is already posted, but I appreciate you help.

I am wanting to see if I can add ONE other link on the right of my "shopping cart" link. I am wanting a link to my forum.

My website is www.bongeenterprises.com

My forum is www.bongeenterprises.com/forum

Thanks

Scott

[jettrue]

I have read until my eyes are falling out. Sorry if this is already posted, but I appreciate you help.

I am wanting to see if I can add ONE other link on the right of my "shopping cart" link. I am wanting a link to my forum.

My website is www.bongeenterprises.com

My forum is www.bongeenterprises.com/forum

Thanks

Scott

Sure, you could do that easily, add this:

<li><a href="http://bongeenterprises.com/forum">Forum</a></li>

after:

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>

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

        <ul class="level2">

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

Then, now that your menu is longer, you'll need to change the width of the items to percentages so that it doesn't break into two lines in some browsers:

So, first, you need to change div#dropMenu li to this:

div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
        width:14.28%;
	}

Then change div#dropMenu li a to this:

div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#005f00; text-align:center; border-right:1px solid #005f00; border-left:1px solid #005f00;}

Then change div#dropMenu ul.level2 to this:

div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;left:0;}

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

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

[jettrue]

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!