CSS Dropdown menu for the header- With Categories!

[canemasters]

How do I get my ez pages to show up? I'd like to get rid of the "contact us" tab and replace it with "Links" (aka ez pages)

Great mod by the way!

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

[mikeyologi]

Hi,
I have installed the dropdown menu with the ezPages mod and got the menu working ok with the required widths etc, however it has somehow messed all the other widths up on my site and I'm not sure why and where to fix the problem, im only new to php so i have no idea where to look after checking the stylesheets and menu file.

cheers,

here is a screenshot.



the page width in the header and the body should be 850 px, and for some reason the search bar at the top along with the top menu have shifted to the right????

[jettrue]

Jade could you look at my site in IE and tell me whats going on with it. I mean the drop down menu looks good in FF but when you point your mouse at home in IE there is a white space on the right of the menu. I don't know whats going on. Thank for your help.

My site

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;

[jettrue]

Hi Jade'
Well did what you said all good thanks. I have a different problem, I thought it was in SmartBG whowever I have uninstalled both SmartBg and CSS Drop from my files then reinstalled, this time SmartBg first (header_bg) all good, different images loading correct. Installed CSS Drop and my SmartBg header images repeat down my page.
Can you please check my code and see what you think.

Does not stop it from repeating, any advise greatly appreciated.

Kind Regards
Eddie

Could I see a link please. I can't look at code and then visualize the issue. :-) I'm not that good.

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

[jettrue]

Hi,
I have installed the dropdown menu with the ezPages mod and got the menu working ok with the required widths etc, however it has somehow messed all the other widths up on my site and I'm not sure why and where to fix the problem, im only new to php so i have no idea where to look after checking the stylesheets and menu file.

cheers,

here is a screenshot.



the page width in the header and the body should be 850 px, and for some reason the search bar at the top along with the top menu have shifted to the right????

I'll need to see a link to help. The css for the menu is found in includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

[mrcoolboy15]

What line of code in the CSS would allow me to change the width of the drop down menu..?

thanks

I have looked but dont seem to get the right one

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