CSS Dropdown menu for the header- With Categories!

jettrue:

Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).

Hey thanks. Very good recommends and learning something at the same time.

I also discovered
div#dropMenu ul.level2
top: 22px;
was needed. Otherwise when hover over Home in menu, the drop down menu covered the Home link.

Woody

Hi,

Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.

This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.

Thanks in advance.

Tieske:

Hi,

Is there a way to make the menu "sticky"? I'm using a css horizontal menu with a horizontal flyout for over a year and am wondering if somebody knows how to make the menu "sticky" for 5-10 seconds.

This would realy increase the usability since when you don't move the cursor acurate, the menu gets killed.

Thanks in advance.

No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.

There's no gap between your menu item and the drop downs below it, is there?

jettrue:

No, unfortunately it is not an option with a css only menu, that would be available in a javascript based menu.

There's no gap between your menu item and the drop downs below it, is there?

I thought so (java), thanks anyway.

The menu is working just fine (www interieurbeslag nl), but visitors have to balance with their cursor between the upper and lower borders of the menublocks since it also flies horizontal.

The best solution will be changing it to an horizontal menu with vertical flyout like the dropmenu discussed here.

A quick change didn't work since I had trouble with the submenu of the catagories with this menu. And I forgot what makes a flyout vertical... learning by doing a year ago wasn't ideal for long term ;).

Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?

Thanks for any help

WOoDY
(https://www.jorvikgames.co.uk)

jorvikgames:

Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?

Thanks for any help

WOoDY
(https://www.jorvikgames.co.uk)

Part of the issue is the length of your category names. They're trying to take up two lines, and its causing problems down the road. I would change all instances of 12em in stylesheet_header_menu to at least 13em, maybe even 13.5 or 14em.

Now, the issue where hitting level three in order to pop out level 4, and level 5 pops out as well, I can't fix (its a mystery i haven't been able to solve), but if you change the width above, it will no longer be jumbled up.

Now, if you want to stop at a certain level, you can open up includes/classes/categories_ul_generator.php and change the value of max level to three, then it will only flyout to level three.

jorvikgames:

Hi
I'm using this rather nice menu but have hit a problem - some of my categories go more than 5 deep - and the flyout does strange things once you are 4 subcats in - it automatically pops out all the lower subs into an unusable mess. Is there any way to extend the depth this menu supports as I guess that lvl 4 behaviour is in the code somewhere...?

Thanks for any help

WOoDY
(www.jorvikgames.co.uk)

Great site, btw!
However, "Heroes of Azaroth" probably doesn't really have "Booser Boxes" (more like WoWarcrack) :D

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

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

icyorchid:

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

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

The color changes are simple CSS (in the stylesheet). Coordinate the colors with those you're already using on your site for the best look.

As far as the changing size, that has been thoroughly addressed in this thread... go back a couple pages & you'll find it easily :)

cheers!

icyorchid:

Hi,
Can you tell me how to make the drop down menu to the width of the my site?

I also would like to change the color to the drop down menu.
Something that will make it pop. Any color suggestions with the
code would be appreciated. :)

I don't like red or green. lol

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

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

jettrue:

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

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

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 https://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.)

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!

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!

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:

SO, just add a link after, like this:

You would just add it after:

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

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

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:

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

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

[QUOTE=all4coffee;425288]> jettrue:

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