New! All-CSS Flyout Nav by Holly ‘n’ Big John
Holly Bergevin and Big John (John Gallant) from positioniseverything.net have yet again come up trumps, this time with a fantastic CSS flyout menu – by far the best such menu I’ve seen so far.
The demo of the menu shows how it’s all done. Just View Source to see for yourself. Quite nifty is the double-sided flyout on the third level. Although not sure I’d use such a feature myself, I can see its uses in situations where it’s preferable to display the content in the space below the menu while the flyout is open.
Naturally, being all CSS (albeit with a smidgeon of javascript for the benefit of our dear friend Win/IE) it enables semantically correct, accessible navigation that degrades well in the absence of javascript and/or styling.
My mind is spinning, thinking of the possible uses to which I can put this menu! It will be most interesting to see how it matures. (Sounds like wine, but then again it will probably improve with age!)
Postscript: the argument has been put forward that CSS should not control behaviour – that the DOM should do that. In (general) theory, I agree – but it’s a personal opinion we all have to form. In actual fact, the DOM has limitations too. I’m no javascript guru and maybe I’ve only come across badly written DHTML menus, but some will only allow one menu on the page, and so on. Give me CSS over that, any day… but when it comes to the crunch I take the view that the behaviour is actually the clickable link, and the CSS and its hover state merely draw attention to that interactivity – either as a rollover or as a flyout menu, or whatever.
