CSS Dropdown menu for the header- With Categories!

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!

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!

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

countrycharm:

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;

Edm:

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

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!

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.

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

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

jettrue:

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

Change this:

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

https://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!

canemasters:

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

https://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?

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

did you look in includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css?

jettrue:

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

https://www.canemasters.com

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.

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.

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.

You want the ezpages on its own dropdown, called "links" correct?

Change this:

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

To this:

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

jettrue:

You want the ezpages on its own dropdown, called "links" correct?

Change this:

Thank you so much! :clap: It worked perfectly. I'd like to send you a private message, but it looks like you box is full...

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

jettrue:

did you look in includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css?

yes i have looked in that CSS file and i have changed other things attempting to change what i need changed but i have found the wrong width's.

please take alook if you wish: https://www.regalogratis.net

If you look at the site, notice the size of the drop down menus, compared to the actual buttons.

thanks

mrcoolboy15:

If you look at the site, notice the size of the drop down menus, compared to the actual buttons.

thanks

Yep, that is controlled in the file I mentioned, simply change all instances of 12em (3 of them) to a larger number.