CSS Dropdown menu for the header- With Categories!

[jettrue]

Hi all,

I'm relatively new to zencart (just finishing up my first site).
I've figured out everything I've needed to except this last item.

I have four top level categories and I would like those to be on the main CSS menu with the dropdown containing the sub directories.

I've tried to customize this menu and I've even looked at Paul's version which does what I want in a split menu version. I guess I'm still to new to PHP to "get" it.

Could someone please nudge me in the right direction here?
Do I need to generate a new categories_ul_generator.php or can I use the existing one and just change the tpl_drop_menu.php?

Any help would be appreciated as I'm starting to get a little frustrated.

By the way Jettrue really nice menu! this threads getting a little long though ;-) I read the entire thing though.

Doesn't Paul's version do exactly what you're looking for? I don't understand how what you want is different from what Paul's does.

[BarryMcQ]

Hi,

Yes you are correct :-)
I should have just loaded it up instead of trying to figure it out!

I'm well on my way to finishing now thanks.

Do have one question though.
One of the top categories wraps over two lines, which is fine but it means that all the other items in the menu have separator lines that only go halfway through the menu.

You can see it here:
http://www.plantationgroup.co.nz

[jettrue]

Hi,

Yes you are correct :-)
I should have just loaded it up instead of trying to figure it out!

I'm well on my way to finishing now thanks.

Do have one question though.
One of the top categories wraps over two lines, which is fine but it means that all the other items in the menu have separator lines that only go halfway through the menu.

You can see it here:
http://www.plantationgroup.co.nz

You would probably be better off switching from a percentage for each item, to a left and right padding for each item.

Remove:
width:16.667%;
*width:16.649%;

from #dropMenu li

and then change the padding for div#dropMenu li a to something like this:
padding: .6em 1.7em;

[Edm]

Hi am new to Zen, php, etc etc. Really enjoying it. Have installed Mostly Grey template changed all colors to aqua, blue & green. Installed drop down menu, "great" . Have managed to change color on non hover & background but + text cant seem to get drop downs to change color. Site is running on example.com.

Have added black border to left but would like to but black border top & bottom . Will this interfere with drop down? do I just add
border bottom 1px 00000
border top 1px 000000

Also when i placed my logo into Mostly grey the nav breadcrumb auto floated down to accommodate. Turned off breadcrumb however logo is small & distorted i cant find where to increase this spacing. Logo 980x186 px.

Finally would like to float side box with a small space from static drop down menu bar have been trying but not much success. Any help greatly appreciated.
Regards
EDM

[jettrue]

Hi am new to Zen, php, etc etc. Really enjoying it. Have installed Mostly Grey template changed all colors to aqua, blue & green. Installed drop down menu, "great" . Have managed to change color on non hover & background but + text cant seem to get drop downs to change color. Site is running on example.com.

Have added black border to left but would like to but black border top & bottom . Will this interfere with drop down? do I just add
border bottom 1px 00000
border top 1px 000000

Also when i placed my logo into Mostly grey the nav breadcrumb auto floated down to accommodate. Turned off breadcrumb however logo is small & distorted i cant find where to increase this spacing. Logo 980x186 px.

Finally would like to float side box with a small space from static drop down menu bar have been trying but not much success. Any help greatly appreciated.
Regards
EDM

Link to the site? Have you searched for the mostly grey thread?

To change the drop down color, that is the very top portion of the stylesheet_header_menu.css:

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

To add a border to the drop menu, you'd add it to:

div#dropMenu ul.level1

and the correct formatting would be:

border-top:1px solid #000000;
border-bottom:1px solid #000000;

[Baller#23]

Hi,
Im totally new to Zen Cart, I know a little bit about webdesign though. I thought this Dropdown is perfect and tried to install it.
Here is my result: www.psqinone.com


I bought a template from www.templatemonster.com
--> http://www.templatemonster.com/zen-c...tes/14595.html

I put "additions_to_.htaccess" in "public_html"
"csshover.htc" in "public_html/includes"
"categories_ul_generator.php" in "public/includes/classes/categories_ul_generator.php"
"headermenu.php" in"/includes/languages/english/extra_definitions/headermenu.php"
"ezpages_drop_menu.php" in "/includes/modules/sideboxes/ezpages_drop_menu.php"
"tpl_drop_menu.php" and tpl_header.php" in "/includes/templates/MYTEMPLATE/common/tpl_header.php and tpl_drop_menu.php"
"stylesheet_header_menu.css" in /includes/templates/css/stylesheet_header_menu.css
"tpl_ezpages_drop_menu.php" in "/includes/templates/sideboxes/tpl_ezpages_drop_menu.php"

I hope this configuration is correct...
I deleted stylesheets out of the folder "/includes/templates/css" which belong to the template I bought. Deleting them didnt make any difference....


My tpl_header.php :
<?php
/**
* Common Template - tpl_header.php
*
* this file can be copied to /templates/your_template_dir/pagename<br />
* example: to override the privacy page<br />
* make a directory /templates/my_template/privacy<br />
* copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
* to override the global settings and turn off the footer un-comment the following line:<br />
* <br />
* $flag_disable_header = true;<br />
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_header.php 3392 2006-04-08 15:17:37Z birdbrain $
*/
?>
<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
echo htmlspecialchars(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
echo htmlspecialchars($_GET['info_message']);
} else {

}
?>
<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<div id="navMainLinks">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
<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, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch">
<?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?>
</div>
</div>
</div>
<div class="clearBoth"></div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapperOuter">
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
</div>
</div>
<div class="clearBoth"></div>
<!--eof-branding display-->
<!--eof-header logo and navigation display-->
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<?php } ?>

I dont have the language/currency modul on my website anymore. I deleted it.


Any ideas?

That would be amazing!

Baller#23

[jettrue]

Hi,
Im totally new to Zen Cart, I know a little bit about webdesign though. I thought this Dropdown is perfect and tried to install it.
Here is my result: www.psqinone.com

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<?php } ?>


Baller#23

Your issue is the above section. You put this code:

<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->

WITHIN the code for categories tab display:

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<?php } ?>

You have the categories tab menu turned off, THEREFORE, you do not see the drop down menu. Move the code for the drop menu, AFTER the end of the category tabs:

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<?php } ?>
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>

[Baller#23]

Thanks a lot! everything´s working now! Is there a way to round the edges of the dropdown? so that every section ( home,categories...) is by itself with round edges?

[Impact-Flies]

Is it possible to rename the text in the nav bar from 'Categories' to 'Products'

[jettrue]

Thanks a lot! everything´s working now! Is there a way to round the edges of the dropdown? so that every section ( home,categories...) is by itself with round edges?

You'd have to make images to do that.