pure CSS menus
For some time now, I've had this idea that if one could
apply :hover to arbitrary elements, all kinds of
possibilities would open up. Sure, we can do nifty stuff with
hyperlink hovering, such as popup
text and images, but to be able to apply hover styles to
any element-- that would really be something.
So consider the box with the text "css/edge" near the top left of the page, or the list of "meyerweb" links on the right. If you have a browser that has advanced enough CSS2 support, you can hover over some of the links and get a popout menu. As you drill down, some of the links in those menus lead to popout submenus. And it's all driven by CSS and some nested lists. Absolutely no Javascript was used in the making of these menus.
No!
Yes! That's what happens when you have a rendering engine (Gecko, in this case) that permits hover styles on arbitrary elements. Okay, it also has to be good at positioning, but fortunately for us, Gecko's positioning code is up to the task.
Dig into the markup and the CSS. It's all there, and it's
actually a lot less complicated than you might think. In both
cases, the markup for the menus is nothing more complicated
than some nested ul elements. I just used
id hooks on each list so that I could give each
list a very different look-and-feel. Try it out! Even better,
thanks to the title attribute, we can have
"tooltip" expansions of the menu entries-- try it on any link
in a "css/edge" submenu (in either menu).
Here's the foundation of this effect:
li ul {display: none;}
li:hover > ul {display: block;}
Sprinkle a little positioning on top of that, so that the popout menus go where you want them, and you're in business. Frost on some borders, colors, et cetera, and you're stylin'.
How about other browsers?
In other CSS-aware browsers, like Internet Explorer, you'll see the toplevel links, and they'll work just fine. The popout menus won't work, that's all. Of course, this means that the browser is downloading the contents of the complete menu, but only able to display a small part of what it downloaded. This is in some respects unfortunate, but at least the basic menu will still function. And the amount of markup involved is probably a lot fewer characters than a similar Javascript-driven menu intended to serve a similar purpose.
(And if you're grumbling that you don't see why anyone would deploy a menu system that only worked in one browser, then you should see how many Javascript menus I deal with that don't work in more than one or two browsers-- usually because they're doing browser sniffing as if this were still 1998. But I digress.)
If the browser is too old to understand CSS, or doesn't support CSS because (for example) it's a text-mode browser like Lynx, then the user will get the entire menu as a set of nested lists. No problem.
It would also be possible to construct the selectors in the CSS so that the hiding of the submenus could only be understood by advanced browsers, thus giving the complete set of nested lists to any browser that wouldn't have been able to deal with the popouts. I didn't take this step for the demo, because it cluttered up the CSS. Besides, it just didn't seem like as much fun that way.
Acknowledgments
It was Porter
Glendinning who gave me the idea to use nested lists
instead of hopelessly convoluted nested divs, and
both Porter and Inigio Surguy
devised the same basic technique independently of my efforts.
Both their demos (Porter's,
Inigo's) came
to my attention just after I announced the first draft of this
demo on css-discuss, and in both cases gave me some ideas to
flesh this demo out a little more fully. Many thanks and kudos
are due to both!