Post Archive

› May 16, 2003

Hierarchical menu in CSS!

  • Reported by pixy

I prepared an example how to make hierarchical dynamic menu in CSS. Just (X)HTML and CSS, no script is used. Unfortunately, due to Microsoft's stupid implementation of the :hover pseudo-class (supported for A-elements only), it doesn't work in any IE. It works fine in Gecko-based browsers (tested in Mozilla, Camino), in Opera7 (older versions not tested), and Safari (just several little bugs while leaving the :hover state). Maybe other browsers, too (Konqueror?).

Comments

1. May 16, 2003 07:15 PM

Quote this comment

Joshua Kaufman Posted…

Pixy, you continue to impress. Excellent work! Who says CSS is BS?

2. May 17, 2003 02:42 AM

Quote this comment

Stuart Langridge Posted…

Eric Meyer has already produced some work based on this theory, and noted the same issues; his creation was prompted by a thread on css-discuss.

3. May 17, 2003 08:15 AM

Quote this comment

Seamus Posted…

I like it. I think it is very cool that there is more than one way to do it. I have been playing around with a menu system that pops up instead.

4. May 18, 2003 05:20 PM

Quote this comment

robbear7 Posted…

As much as I love the concept of CSS only flyout menu's/drop down menu's, it just is not going to take off without IE's lack of hover pseudo-class support outside of the A element. Even worse, if IE does decide to implement this in future updates, there would be that waiting period for users to upgrade, which would take an extensive amount of time. If I am correct, http://devedge.netscape.com/ uses the same menu idea, but with a browser sniffer to activate the js for IE and older browsers that would not support the hover pseudo-class outside of the A property. I could be wrong.. please correct me if so. :)

5. May 18, 2003 07:18 PM

Quote this comment

insin Posted…

Correct, robbear7 - they did an article about how it works as well: Netscape DevEdge Redesign: JavaScript

6. May 19, 2003 07:44 AM

Quote this comment

Andyed Posted…

How about taking your menu to the next level with a fisheye view? It's on my list to expand my demo to some js/css implemenation. Check the demo at: http://surfmind.com/lab/exscade/ (for Mozilla)

7. March 14, 2004 07:42 AM

Quote this comment

iubito Posted…

Hi ! If you are interested, I've created a css menu that work on IE, Moz, Opera, Netscape... on win, mac and linux. You can try it at http://iubito.free.fr/prog/menu.php

I know that IE often sucks but it's mostly used so I adapted my script for IE (it was quite easy).

Have Fun !

8. May 25, 2005 08:26 AM

Quote this comment

Antonio Posted…

Works fine in Konqueror 3.2.2 (Debian/Knoppix with KDE 3.2.3).