Support for CSS Flyout Menu

[ckosloff]

There is another contrib for that, look in the Downloads section, type menu in the searchbox.

[Get Em Fast]

All right, tried the fix for Nikolay, but no luck.
Still getting the image roll-over effect.
Replaced the whole stylesheet_categories_menu_css.
Please help.
Thanks in advance.

Hmm. with that css that I posted, you should be getting NO imges. I've actually got a more recent css that I worked on for a client that has NO images in it. The css looks like this:

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #838367;
     width: 95%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.0em;
}
div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 100%; 
         background-color: #838367; 
         z-index: 1000;
/*  border: 1px solid #AAA;*/
}

div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}

div#nav-cat li {
    z-index: 1; 
        position: relative; 
        list-style: none; 
        margin: 0;
    margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 1px solid #CCC; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
    margin: 0; /* this overrides the margin-top in the declaration above */
} 
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
        display: block; 
        padding: 0.25em 0 0.25em 0.5em;
    text-decoration: none; 
        width: 99%; 
        color: #CDB38B;
}

div#nav-cat>ul a {
        width: auto;
}

div#nav-cat ul ul {
        position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
}

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block; 
        background-color: #756783;
}

That should make it look EXACTLY like the attached thumbnail:



Though, I see you have been working on it, but you STILL got those images that you initially DIDN'T want. Change to this css (no images), then you can edit the colors the way you want. If you've decided you want images, and need help, just let me know. I'm sorry I haven't been around like I said I would, but I've been VERY busy with a 7-day a week job, 3 boys, 1 wife, 1 dog, 24,000 chickens, a website for a client that I'm already late on, and living on no sleep (3-4 hrs/night) to do it all. But, I DO still check in when I can, so don't give up.
I'll answer your other questions as soon as you know for sure if you want the images, or not.

Hope this helps.

[ckosloff]

Get 'em Fast,

Thanks for reply, even if it wasn't "fast".
I am working with just two images for now, because I find that the effect is more stunning and the load is minimal.
The questions are in a previous post, and basically they boil down as to why the stylesheet doesn't override the main stylesheet.
This defeats the purpose of CSS, which should be "cascading".
I would like to have the hyperlink text be vertical-align = middle, but this doesn't work, however, as I said previously, text-align = left does.
Very intriguing.
Cannot change color either.
Also, why is the Specials link showing in this menu, whereas it doesn't show in the original ZC menu?
Another mystery.
These are the questions I am dealing with now.
Will of course give a spin to the purely CSS menu you so kindly posted, I will test it and let you know.
I don't have 24,000 chicken, just half in the fridge, and a dog, but hey, everybody has a tough life and lots of things to do.
Cheers!

[scottrdj]

Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?

[fusionsp]

im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't

[Get Em Fast]

Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?

Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;
}

and change "display: block;" to "display: none;" (no quotes).

Hope this helps.

[Get Em Fast]

im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't

Fusion and ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:

h3#categoriescssHeading.leftBoxHeading {
        color: #FFFFFF;
}

Hope this helps.


ckosloff, Also, try using "text-align: center;" instead of "middle".

[fusionsp]

Fusion and ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:

h3#categoriescssHeading.leftBoxHeading {
        color: #FFFFFF;
}

Hope this helps.


ckosloff, Also, try using "text-align: center;" instead of "middle".

well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.

[Get Em Fast]

well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.

Same place. Just add........."font-size: 0.5em;" , or whatever you need your size to be.

[scottrdj]

Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;
}

and change "display: block;" to "display: none;" (no quotes).

Hope this helps.

Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?