CSS Menus
I originally pointed to several resources in some old blog posts…
The best drop down menus? takes a look at gazingus.org menus. They are great but limited to using more js than is necessary. Essentially it relies on an onclick event and does not contain a :hover event. A simple test proved that onMouseOver did not work but I did not follow it up with deeper exploration.
CSS Menus Again and in CSS Menu Roundup. Here I point to a few sites where more pure forms of CSS menus are used.
The trouble with pure CSS menus, well, is no trouble except that Win IE does not support the pseudo :hover CSS2 statement.
Enter some solutions…
Suckerfish—What I base my current menus on (as of 06.01.04). Pretty amazing collection of resources. It is a light weight CSS, html list, js solution. The guy is funny too… a quote:
IIIIN the blue corner we have Suckerfish, the original lightweight, accessible, cross-browser, standards-compliant :hover mimic. IIIIN the red corner we have ’.htc’ – the JavaScript files accessed via CSS to mimic :hover.Ding ding!
And Suckerfish instantly lands a heavy blow on .htc’s validity – .htc simply isn’t standards compliant CSS.
Oooo… .htc sneaks in a crafty jab without the need for additional selectors…
Suckerfish bounces around the ring. He’s much lighter weight than his opponent.
And OH! The IE 5.0 uppercut! That’s something that .htc just doesn’t have the skill to do, whereas Suckerfish can work IE 5.0 seamlessly.
.htc is dazed! And the contest is over! Suckerfish wins on points! TKO!
AdXMenu—Very clean and simple dropdowns. No Mac IE support. Perhaps we ignore Mac IE? This is what suckerfish disses.
—These depend on an .htc file for Windows IE support. This is an action file that makes IE do something akin to the pseudo class :hover that CSS2 specifies. (yes, it is overcoming another IE shortcoming in standards compliance but with a MSFT approved hook)
More of btw material now…
whatever:hover —Uses .htc or “action” files for making IE Windows behave and correct it for lack of :hover support. This may be the original source for said trick.
IE7—developer of some replacement behavior for IE! To fill in for the missing CSS2 support. It has recently been accepted as a sourceforge project, although I wouldn’t use it on a live site yet.