CSS Dropdown menu for the header- With Categories!

[canemasters]

Let me clarify what I want to do...

I'd like to move "Contact Us" as a drop down item in the "Information tab", and replace contact us, with Links.

Thank you!

[jettrue]

Let me clarify what I want to do...

I'd like to move "Contact Us" as a drop down item in the "Information tab", and replace contact us, with Links.

Thank you!

Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

Change this:

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

to this:

<li class="submenu"><?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?></li>

And change this:

<?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>

to this:

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

If there are issues with those changes, please reply with a LINK.

[canemasters]

Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php

Change this:

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

to this:

<li class="submenu"><?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?></li>

And change this:

<?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>

to this:

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

If there are issues with those changes, please reply with a LINK.

Seems to have worked on moving the contact us to the information dropdown, but links completely disappeared....

www.canemasters.com

Here is my stylesheet_header_menu.css:

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

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


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

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

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

.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}

#catalog, #categories, #information, #cart, #account, #ezpages {
background-image: url(../images/cssmenu-bg.jpg);
background-repeat: repeat-x;
}

And my tpl_drop_menu.php:

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers |
// | |
// | http://www.zen-cart.com/index.php |
// | |
// | Portions Copyright (c) 2003 osCommerce |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license, |
// | that is bundled with this package in the file LICENSE, and is |
// | available through the world-wide-web at the following url: |
// | http://www.zen-cart.com/license/2_0.txt. |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to |
// | [email protected] so we can mail you a copy immediately. |
// +----------------------------------------------------------------------+
// $Id: tpl_drop_menu.php 2005/06/15 15:39:05 DrByte Exp $
//

?>
<!-- menu area -->
<div id="dropMenuWrapper">
<div id="dropMenuWrapperb">
<div id="dropMenuWrapperc">
<div id="dropMenuWrapperd">
<div id="dropMenu">
<ul class="level1">
<li class="submenu" id="catalog"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
<ul class="level2">
<li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li>
</ul>
</li>
<li class="submenu" id="categories"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
<?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</li>
<li class="submenu" id="information"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
<ul class="level2">
<?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
<?php } ?>
<?php if (DEFINE_PRIVACY_STATUS <= 1) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
<?php } ?>
<?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
<?php } ?>
<!--<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>-->
<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
<?php } ?>
<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
<?php } ?>
<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
<?php } ?>
<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
<?php } ?>
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
</ul>
</li>
<li class="submenu" id="ezpages"><?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?></li>
<li class="submenu" id="account"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
<ul class="level2">
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
<?php } ?>
</ul>
</li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li class="submenu" id="cart"><a class="noLine" 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 id="cart"><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</div><!-- end dropMenuWrapper-->
<div class="clearBoth"></div>

Thank you for your help!

[jettrue]

Seems to have worked on moving the contact us to the information dropdown, but links completely disappeared....

www.canemasters.com

Here is my stylesheet_header_menu.css:


And my tpl_drop_menu.php:


Thank you for your help!

Do you have ezpages turned on, as described in the readme for this mod?

[canemasters]

Do you have ezpages turned on, as described in the readme for this mod?

Yes, easy pages is on. Left Right status is off and Single column status is on....

I see what's wrong now... But it's still not working. If I set the ezpages to on for the header, they show up in the dropdown bar, not in the links tab... that isn't showing. I enabled the ezpage "dojos" in the header. It's showing up, just not under "links".

www.canemasters.com

[canemasters]

In the line that is suppose to be making "LINKS" show up in the main drop down bar, what is this file ezpages_drop_menu.php ? That file doesn't exist in my sideboxes directory. ezpages.php does exist though.... however, if I change it to say ezpages.php instead of ezpages_drop_menu.php, the entire site stops loading past that line of code.

<li class="submenu" id="ezpages"><?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?></li>

[canemasters]

I had to re-enable the left column status for our customers until it's up on the drop down bar, but I don't think that would disable it from being where it needs to be so long as the single column status is set to on.

[countrycharm]

You can't get rid of that space (I'm assuming its a little sliver), but you can give div#DropMenu the same background color as the bar:

background:#B74336;

For give me jettrue for not understanding you, or you are miss understanding me. When you place your mouse over the categories and move it to home the menu shifts to the left and there is a long blank white space on the right side. This only happens in IE. I'm checking it in IE7. Thanks again.

Randy

[nils]

First of all, I'd like to thank JetTrue for this terrific addition to Zen Cart and for the huge amount of time taken to help all of the people (like myself) who are having issues. It's very generous of you to offer such support when much of the time the issue has nothing to do with your mod.
That may be the case for me today. I'm wondering if anybody could take a look at my site in IE6 and help me understand why each top level list item is taking up a whole row. I've played with spacing, display types, margins and padding but to no avail. Any help anyone can offer would certainly be greatly appreciated. It works great in IE7, Firefox, Safari, etc. but not in IE6.
Thanks so much!

-Nils

http://www.okmfg.net/store
Here's the modified CSS I'm using for the header.

[jettrue]

First of all, I'd like to thank JetTrue for this terrific addition to Zen Cart and for the huge amount of time taken to help all of the people (like myself) who are having issues. It's very generous of you to offer such support when much of the time the issue has nothing to do with your mod.
That may be the case for me today. I'm wondering if anybody could take a look at my site in IE6 and help me understand why each top level list item is taking up a whole row. I've played with spacing, display types, margins and padding but to no avail. Any help anyone can offer would certainly be greatly appreciated. It works great in IE7, Firefox, Safari, etc. but not in IE6.
Thanks so much!

-Nils

http://www.okmfg.net/store
Here's the modified CSS I'm using for the header.

Do you realize that you have two IE6.css stylesheets uploaded online? Remove the extra one.

If that still doesn't help, does this happen on my test site, www.zencart137.jadetrue.com? if not compare my original css with yours and make changes till it is fixed. :-)