Support for CSS Flyout Menu

[ethical]

thanks for your reply and your right, I did make that work now thanks. I still have 1 minor issue.

1) Any sub menu item that has a further submenu displays the background color that is the same as the top level background, (on your site its grey, on mine white)
my question here is how can I set a different color for any submenu item that has a further submenu?

also Do you have a suggestion on a style editor?

thanks so much!

[Get Em Fast]

hey get em thanks. I decided to work with the new code that ckosloff posted and it works a lot better. I am just curious to know what code i need to add/edit to:

set a different hover and background colour for the submenu items then those that I have set for the top level menu items.

the menu is live at the moment http://mypumpkindoodle.com/store

thanks

John

Here is a menu that's designed right off your site, so everything but the colors are the same, except with the added scroll in your level 4 menu since it was soooooooooo long.
The colors have been "mapped" out. Each level's color is shown as a color (red, green, blue, etc) instead of being hex colors.

Anyone else who uses this for a reference to change background colors, KEEP IN MIND: This was NOT customized for your site!!! This is just a color "map" for you. In THIS css, the only level that will scroll is level 4, but if you need another level to scroll, leave everything the same except the 2 level numbers, and the desired height of your scrolling box. In other words, if you need level 3 to scroll, it would look like this:
[code]div#nav-cat ul.level2 li.submenu:hover ul.level3 { height: 200px;overflow: scroll;}[code]
This (above) tells your menu to scroll level 3 when you hover on level 2.

Any questions?

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #ffffff;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.3em;
}
div#nav-cat ul {
     margin: 0em; 
     padding: 0em; 
     width: 100%;  
     z-index: 1000;
     line-height: 14px;
     border: none;
}

div#nav-cat ul.level2 {background-color: #ffffff;}
div#nav-cat ul.level3 {background-color: #ffffff;}
div#nav-cat ul.level4 {background-color: #ffffff;}
div#nav-cat ul.level5 {background-color: #ffffff;}
div#nav-cat ul.level6 {background-color: #ffffff;}

div#nav-cat li {
     z-index: 1; 
     position: relative;
     list-style: none; 
     margin: 0;
     margin-top: 0; /* change it to whatever space you want to put space between buttons*/
     border-bottom: 1px solid black; /* <---this line may help or hinder IE menu shifting issues. */
     background-color: pink; /*Sets background of Menu items that DOES NOT have sub-menu's SYSTEM WIDE!!! */
    
}
div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon; /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
} 
div#nav-cat li:hover {background-color: green;} /* sets the HOVER background of any MENU item that DOES NOT have submenu items */
div#nav-cat li.submenu {background-color: blue;} /* sets the background of any menu item that DOES have submenu items */
div#nav-cat li.submenu:hover {background-color: red;} /*sets the HOVER background of any menu item that DOES have submenu items */



div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
    display: block;
    padding: 0.25em 0 0.3em 0em;
    text-decoration: none; 
    width: 100%;
    color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different 
    colors for each level, such as font color changing when you hover, you need to remove any MENU colors  referred to in your
    stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */
}

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;
}
div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}

Hope this helps everyone "map" out their colors.
And also resolve the life-long question of "How can I get my menu to scroll, because it's so long.".

[ckosloff]

Here is a menu that's designed right off your site

Get em Fast, it's a blessing that you are back, because the issue of submenus overlapping has dogged many users, I could never articulate an answer within the menu with images (maybe there isn't any...).
The comments in your CSS are what users need, I'm not much good at that because I just use the settings I find.
So, why don't you rewrite the mod, with comments et al.
I know, I know, when you have the time.

[Get Em Fast]

Get em Fast, it's a blessing that you are back, because the issue of submenus overlapping has dogged many users, I could never articulate an answer within the menu with images (maybe there isn't any...).
The comments in your CSS are what users need, I'm not much good at that because I just use the settings I find.
So, why don't you rewrite the mod, with comments et al.
I know, I know, when you have the time.

Yea, that was a quick edit. I've thought for a ling time that I should "map" out those pesky little colors so the average user could change them with a little more ease. And the scrolling thing was something that you AND I worked on a long time ago, but couldn't ever get it quite right. We tried to limit the actual number of items displayed before it started scrolling.....Ha!! All we had to do was set the damn height on the box!! Go figure.
Now, just wait until somebody actually uses levels 5-∞.....

Also, I haven't checked to see if another level beyond the one that scrolls will even show up......(today's to-do list).

Back with an up-date (to this post) in a little bit.

Update to Menu: When I think it's PERFECTLY self-explanatory.

[Get Em Fast]

Do you have a suggestion on a style editor?

Sorry, I missed that question (good thing I go back and re-read posts, huh?), although a little irrelevant to this thread (hint: should have pm'd that one). Ckosloff is my thread security.....he'll get you for that.....

Everybody has their preference of editors, with some swearing by nothing but notepad to do ALL their coding. Myself, I like to see EVERYTHING in "action", so I use DevPHP for ALL of MY needs. When I go to somebody Else's site (like yours) to edit something (like your menu), then I use the Web Developer Add-on for FireFox, then save to a simple text file (with notepad or wordpad), then upload it to you or the forum.

You might also enjoy THIS THREAD.

[ckosloff]

I have already made my suggestion, more than once.
Here's an example:
http://www.zen-cart.com/forum/showpo...&postcount=254
It's what I use, but I don't like to suggest, because, yes, that might lead to off-topic discussions and then site security would kick in.

[ckosloff]

div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon; /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
}

Your comment is of course right, I just wanted to add that if you set margin-left to anything but 0, IE6 will have unexpected behaviors.
That browser has caused lots of grief, until I finally got it workable, not perfectly right.

[Get Em Fast]

div#nav-cat li li {
    margin-left: 0em;/* This puts space between menu and sub-menu, reccomend to leave at 0 unless you have over-lapping problems. */
    background-color: salmon; /* sets the background of submenu ,WITHOUT submenus, when menu is HOVERED */
}

Your comment is of course right, I just wanted to add that if you set margin-left to anything but 0, IE6 will have unexpected behaviors.
That browser has caused lots of grief, until I finally got it workable, not perfectly right.

Absolutely correct. Some browsers do treat this differently. When you get to the right side of the menu, just about to touch the sub-menu, the sub-menu will disappear! Sometimes you actually NEED to set a negative number on this (-0.1em;) which will overlap just a hair, but keep sub-menu in view.
Good catch. Thanks. I will also put that in comment section of css.

[ethical]

thank you both for your help! great mod and great support. seems to be working well for me thanks again.

[Get Em Fast]

thank you both for your help! great mod and great support. seems to be working well for me thanks again.

Anytime, ethical. That's what this place is all about. We got great software for FREE, so helping each other with it, is just the "ethical" thing to do.

Yes...........the pun WAS intended



Oh........sorry for taking so long on the reply, but as you can see, I was working on something that answered several questions at once. And a new scroll feature that has NEVER been implemented into this script until now.

Enjoy, for now. Still working on it.