Zen Cart Logo
Forums / All Other Contributions/Addons / CSS Dropdown menu for the header- With Categories!

CSS Dropdown menu for the header- With Categories!

Views: 615,653

Results 961 to 980 of 2,344
27 Apr 2008, 12:20 AM
#961
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

CSS Dropdown menu for the header- With Categories!

BarryMcQ:

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.

27 Apr 2008, 1:06 AM
#962
barrymcq avatar

barrymcq

New Zenner

Join Date:
Feb 2008
Posts:
2
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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

27 Apr 2008, 3:52 AM
#963
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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

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;

29 Apr 2008, 11:44 AM
#964
edm avatar

edm

New Zenner

Join Date:
Mar 2008
Posts:
52
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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

29 Apr 2008, 12:50 PM
#965
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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
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;
2 May 2008, 5:02 AM
#966
baller_23 avatar

baller_23

New Zenner

Join Date:
May 2008
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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: https://www.psqinone.com

I bought a template from https://www.templatemonster.com
--> http://www.templatemonster.com/zen-cart-templates/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

3 May 2008, 3:06 AM
#967
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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: https://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 } ?>
[B]<!--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>[/B]
4 May 2008, 9:25 PM
#968
baller_23 avatar

baller_23

New Zenner

Join Date:
May 2008
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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?

4 May 2008, 11:15 PM
#969
impact_flies avatar

impact_flies

New Zenner

Join Date:
Apr 2008
Posts:
73
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

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

5 May 2008, 12:42 AM
#970
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

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?

You'd have to make images to do that.

5 May 2008, 12:43 AM
#971
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Impact-Flies:

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

includes/languages/english/extra_definitions/YOUR_TEMPLATE/headermenu.php

5 May 2008, 1:14 AM
#972
baller_23 avatar

baller_23

New Zenner

Join Date:
May 2008
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

You'd have to make images to do that.

I could create some in PS. Where would I insert the pictures? Does you Dropdown with round corners work for 1.3.8?

5 May 2008, 1:40 AM
#973
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Baller#23:

I could create some in PS. Where would I insert the pictures? Does you Dropdown with round corners work for 1.3.8?

Dropdown with rounded corners? I don't have a drop down with rounded corners.

You would insert the image as css in the includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

5 May 2008, 3:42 AM
#974
baller_23 avatar

baller_23

New Zenner

Join Date:
May 2008
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

Dropdown with rounded corners? I don't have a drop down with rounded corners.

You would insert the image as css in the includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css

Sorry, you are right. I was thinking of somebody else...

I inserted the images as you said, and everything works fine. Thanks!

But when I hover over the images, there is still the rectangular box. Is there a way to solve that problem?

And when I click on a one of my Categories for example the site moves over and my buttons dont align with the rest of my page.

My URL is https://www.psqinone.com

Thank you so much for you help. You are great!:smile:

5 May 2008, 8:13 AM
#975
impact_flies avatar

impact_flies

New Zenner

Join Date:
Apr 2008
Posts:
73
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

jettrue:

includes/languages/english/extra_definitions/YOUR_TEMPLATE/headermenu.php

Thanks, thats fixed it :smile:

I have just noticed that the colour of the bar at the very top has changed to white in Firefox, the bar with 'Home & Log in' at the left side and the search box on the right, it should be the same colour as the others lower down such as the new products box etc. This is showing properly in IE7, the links are still there, if you move the mouse over them they show up. Any suggestions?

http://impactflies.com/fly_shop/

5 May 2008, 9:11 AM
#976
impact_flies avatar

impact_flies

New Zenner

Join Date:
Apr 2008
Posts:
73
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Sorry, there appears to be no post edit button.

The boxes that drop down are narrower than the top boxes, how do I change them to be all the same width?

7 May 2008, 12:32 AM
#977
impact_flies avatar

impact_flies

New Zenner

Join Date:
Apr 2008
Posts:
73
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Impact-Flies:

I have just noticed that the colour of the bar at the very top has changed to white in Firefox, the bar with 'Home & Log in' at the left side and the search box on the right, it should be the same colour as the others lower down such as the new products box etc. This is showing properly in IE7, the links are still there, if you move the mouse over them they show up. Any suggestions?

http://impactflies.com/fly_shop/

Anybody have any ideas about this? I have just realised that the log out link is now hidden due to the text being white and therefore not visible on the top bar.

7 May 2008, 6:40 AM
#978
ingham_qld avatar

ingham_qld

New Zenner

Join Date:
Mar 2008
Posts:
29
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

I have searched through all the posts and cannot find information on how to replace the category generator and manually add a category in the dropdown menu. For example, if I wanted to add "Music Genres" as an individual category, what would the lines of code need to look like. My goal is to only show certain categories (not generate the entire listing).

8 May 2008, 3:01 PM
#979
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Impact-Flies:

Anybody have any ideas about this? I have just realised that the log out link is now hidden due to the text being white and therefore not visible on the top bar.

Just for fun, save a copy of your current stylesheet.css, then upload the ORIGINAL classic stylesheet, and see if the issue goes away. Then we'll know whether or not the issue is in the css.

8 May 2008, 3:05 PM
#980
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: CSS Dropdown menu for the header- With Categories!

Impact-Flies:

Sorry, there appears to be no post edit button.

The boxes that drop down are narrower than the top boxes, how do I change them to be all the same width?

Open up includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css and change all instances of 12em (3 places) to 17em.