Forum Moderators: not2easy

Message Too Old, No Replies

Is there any way to retain the bgcolor of a menu tab using CSS?

         

stevemtno

11:12 pm on Dec 8, 2008 (gmt 0)

10+ Year Member



Is there any way using CSS to retain the background color of a menu tab after you move your mouse to the secondary menu? Is there a web state that corresponds to this?

I'm working on a new 2-level menu for our website and this has been a problem. I tried changing the javascript code, which took care of the problem, but it also incorporated a lot of the CSS into it, giving us less control over things (plus I'm more comfortable and/or familiar with CSS).

Here's a link to the test page:
<snip>

I would also be open to adding (but not replacing) the existing JS code.

Any help, suggestions, etc would be appreciated... thanks!

Steve

[edited by: eelixduppy at 11:24 pm (utc) on Dec. 8, 2008]
[edit reason] no URLs, please [/edit]

lavazza

11:39 pm on Dec 8, 2008 (gmt 0)

10+ Year Member



If you Google for << css only drop down menus >> you'll find a host of resources

Although the CSS-only approach might be a fun challenge to implement, it can be a real turn-off for visitors who lack surgical precision with a mouse

doodlebee

12:32 am on Dec 9, 2008 (gmt 0)

10+ Year Member



>>Is there any way using CSS to retain the background color of a menu tab after you move your mouse to the secondary menu?<<

Well, I can't see the link - you'll need to actually post the code for this. But to answer your questions, yes you can. (The only reason you'd need Javascript is for IE 6 - because it doesn't recognize the "hover" state on a list item.) I've done exactly what you want several times, using the Son of Suckerfish menus - which aside from the IE6 only JS that's used for the hovering effect (i.e. making the submenu actually appear) is nothing but CSS.

It would be better to see your code, though. But basically (with using SOS) you just set the li:hover state with the background color and it should stay "highlighted" as you go through the submenu. (The tricky part is if your submenu has a submenu, and making *that* also retain it's hover status!) but it can totally be done. In fact, I think I learned myself how to do it from this forum - I remember posting a similar question a couple of years ago and getting good answers that worked just fine.

lavazza

12:59 am on Dec 9, 2008 (gmt 0)

10+ Year Member



(The only reason you'd need Javascript is for IE 6 - because it doesn't recognize the "hover" state on a list item.) I've done exactly what you want several times,
So have I, in CSS-only too, and it can work (with only a few hacks) in IE5.5 and IE6

Using JS, of course, can help remove the need for surgical precision with a mouse :)

But... after reading up on accessibility, I have decided to use IT to inform rather than dazzle my sites' visitors