CSS Dropdown menu for the header- With Categories!

[icyorchid]

Here's a bunch of css for you.... I started to play with it on your site, and ended up doing all the work for ya, LOL. Replace stylesheet_header_menu.css with everything below.

body {  
    behavior: url(includes/csshover.htc);
    }
 
/*this is the text color and background color when things are hovered over down the menu*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #ffffff!important;background:#2b68ab;}
 
#dropMenuWrapper {
    width:100%;
    height:35px;
    margin:0;
    font-size:11px;
border-left:1px solid #999999;
    }
 
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:12.5%;
    }
 
div#dropMenu ul.level1 {
    width:100%; 
    margin:0 auto; 
    text-align:center;
    background:#ffffff; /*this is the background color of the main menu*/
    height:35px;
    z-index:1000;
    }
 
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 9px 0;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #999999;height:17px;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 16em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:16em;}
div#dropMenu li.submenu li.submenu {}
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 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 35px; background:#999999;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 16em; background:#F0555C}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

The above will make the menu fill your site (I changed the two instances of 750px to 100%), will make each item have a percentage width, gave each item a bigger height since you have a lot of drop downs and some of them would wrap onto two lines, and also adjusts color. You are actually using the categories version of the drop down menu which was developed by someone else, though I don't think he started a support thread, so its fine to ask questions here.

WOW thanks :)
I am happy with it, but how do I get another category where the blank space is? Also when I add categories, will they just appear to the drop down menu or do I have to manually add them and if so how do I do that?

Thanks so much for helping me out. I really appreciate it, wasn't expecting you to do all the work. lol

Have a great Sunday
Sandra

[icyorchid]

WOW thanks :)
I am happy with it, but how do I get another category where the blank space is? Also when I add categories, will they just appear to the drop down menu or do I have to manually add them and if so how do I do that?

Thanks so much for helping me out. I really appreciate it, wasn't expecting you to do all the work. lol

Have a great Sunday
Sandra

I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?

Thanks
Sandra
http://www.the-unique-boutique.com

[icyorchid]

I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?

Thanks
Sandra
http://www.the-unique-boutique.com

Another thing that I see is that the prices are not with the images, they are on the bubble background.

Any way to fix that?
Thanks
Sandra

[jettrue]

I was just showing my family my site, and I don't understand why the drop down menu isn't working on the home page? You said I was using a different drop down menu, is there another one I should use instead?

Thanks
Sandra
http://www.the-unique-boutique.com

Ok, a few issues. First, I'm assuming you're using IE7, and the menu is not supposed to be all scrunched up like that. Change #headerWrappers' width from width:auto, to width:100%.

As for the menu not working on the home page... I bet that only happens when you go to http://www.the-unique-boutique.com, but NOT when you go to http://the-unique-boutique.com

You need to add this to your root .htaccess file:


RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.the-unique-boutique.com$ [NC]
RewriteRule ^(.*)$ http://the-unique-boutique.com/$1 [R=301,L]

## the following makes sure the correct mime type is sent for the .htc file
AddType text/x-component .htc

This will remove all www. before your site's address, so that if people go to www.the-unique-boutique.com, it will change to the-unique-boutique.com. This is only an IE issue, but IE needs the csshover.htc file, and IE also sees www. and non-www as two different domains, and since your site's base URL is http://the-unique-boutique.com, IE gets confused, LOL.

You are using the css dropdown menu that shows the categories in the top level. THe css drop down menu I designed does this instead:
http://www.zencart137.jadetrue.com/

That's what I meant when I said you use a different version.

Yes, categories will automatically add when you add one, however you're out of room, so you'd either need to only add subcategories, or use my version of the menu (right above the one you downloaded in the downloads section.)

[all4coffee]

I'm using the CSS Flyout Header 1.3.*

I figured out the way to clone the Information menu and limited it to 4 items from the original Information DropDown but have no idea how to customize it with my own links (I need both external and internal leading to existing i.e. page_2.php pages.
Here is the link to my site;
http://www.time-co.com/zencart/

I want to customize the second Information menu (the one next to Shopping Cart.

Could you please show me to sample codes for adding intenal and externakl links in place the Shipping & Returns for instance?

Other than my own limitations the mode is just awesome!

[jettrue]

I'm using the CSS Flyout Header 1.3.*

I figured out the way to clone the Information menu and limited it to 4 items from the original Information DropDown but have no idea how to customize it with my own links (I need both external and internal leading to existing i.e. page_2.php pages.
Here is the link to my site;
http://www.time-co.com/zencart/

I want to customize the second Information menu (the one next to Shopping Cart.

Could you please show me to sample codes for adding intenal and externakl links in place the Shipping & Returns for instance?

Other than my own limitations the mode is just awesome!

You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.

For extra links, simply look at the source of your site, and copy the formatting there. For example, the Perfect Pour link looks like this in your source:

<li><a href="http://www.time-co.com/zencart/index.php?main_page=page&id=4&chapter=0">Perfect Pour</a></li>

SO, just add a link after, like this:

<li><a href="index.php?main_page=page_name_here">Name of Page</a></li>

You would just add it after:

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

[Beth-katherine]

Hello ... another fan here of the new Cherry-Zen template but I want to add in this dropdown menu as well. I can't seem to figure out WHERE to add it into my header file. I want it in the E-Z pages row right under my banner.

Here's a link to my site and I will be posting to the Cherry-Zen thread with some questions I have about the product descriptions.

http://smockingbooks.com/index.php?main_page=

not quite open yet as we're not set up with the secure socket layer.

Beth-katherine

[jettrue]

Hello ... another fan here of the new Cherry-Zen template but I want to add in this dropdown menu as well. I can't seem to figure out WHERE to add it into my header file. I want it in the E-Z pages row right under my banner.

Here's a link to my site and I will be posting to the Cherry-Zen thread with some questions I have about the product descriptions.

http://smockingbooks.com/index.php?main_page=

not quite open yet as we're not set up with the secure socket layer.

Beth-katherine

I'm not sure you can put it IN the ezpages row... how about above or below the ezpages row?

From the readme.txt of css dropdown menu:

3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:

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

So, you'll upload all of the files for css dropdown menu (Except for includes/templates/YOUR_TEMPLATE/common/tpl_header.php), and then you'll add the above code to includes/templates/cherry_zen/common/tpl_header.php. If you want it above the ezpages, paste it above this:
<!--bof-header ezpage links-->

if you want it after the ezpages, paste it after this:

<!--eof-header ezpage links-->

[all4coffee]

[quote=jettrue;424756]You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.
quote]

Thanks for your response. What would you suggest and how it needs to be changed to fix the issue w/ Firefox?

I have no access to Firefox so I wasn't aware of it.

[jettrue]

[QUOTE=all4coffee;425288]

You've got issues with your header file, for example, you have headerWrapper twice, and its causing some serious issue in Firefox.
quote]

Thanks for your response. What would you suggest and how it needs to be changed to fix the issue w/ Firefox?

I have no access to Firefox so I wasn't aware of it.

I would reload the original common/tpl_header.php for the template, then follow these instructions for the drop down menu (from the readme.txt):

3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:

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