Hangover (Fly-out) Navigation Part II

A while back I commented on Hangover Navigation–my new preferred term for javascript based fly-out navigation. I really hate fly-out navigation 90% of the time. It’s often a pain to use–even for abled bodied folks, very often completely inaccessible, can actually add to user confusion, and rarely offers decent wayfinding devices.

All that said, there are times whether it either actually makes sense to use fly-out navigation, or, more likely, the ‘committee’ insists that you do. Some day, I’ll get around to writing that long winded article on why fly-out navigation is not a good idea so you can use it as ammo, but, until then, I thought I’d at least offer some options that are decent if one must use fly-out navigation.

When our own organization began requesting that we at least consider fly-out navigation, I began my search for a script that would work. There are literally dozens of options out there. most are bad. Real bad. Out of all the ones I’ve seen, these are the ones that have made the cut. All of these systems use javascript + CSS to style and manipulate a fully accessible, semantic set of UL lists in a very usable manner:

  • UDM4 (Ultimate Drop Down Menu) | $75 per site (less when purchasing bulk licenses)

    This is perhaps the most robust out of all the menu scripts I’ve seen. This a highly versatile menu that is about as accessible as one can make a fly-out navigation system. It offers a variety of means of navigating via the keyboard using both tab keys and arrow keys. The arrow-key navigation being a unique feature I have yet to see in any other script. In terms of visual style, that can all be controlled through a nifty (if a bit obtuse) javascript configuration file that will dynamically write out the the CSS for you. It can also accomodate nearly any screen size, fully adjusting the pop-ups to fit the screen at any point. The only cons to this menu is that it is a tad pricy (priced per site) and the code is a bit heavy.

  • Project Seven’s Pop Menu Magic | $90 unlimited sites (Dreamweaver Plugin)

    Project Seven has long offered a variety of great Dreamweaver plugins and templates. Their Pop Menu Magic is a fairly decent fly-out navigation script/plugin. It’s not quite as accessible as UDM’s (namely in keyboard navigating) but is still an excellent product all-around. They’ve written an article on accessiblity and fly-out navigation that, while I don’t agree 100% with, is still an excellent read.

  • TwinHelix’s FreeStyle Menus | Donationware(!)

    Angus has written and impressive fly-out navigation script. In terms of usability and accessibility, it’s on-par with Project Seven’s offerings, albeit not wrapped in a nice Dreamweaver extension.

  • Scubaduba’s Very Compatible DHTML Menu ASP.NET User Control | Free(!)

    This is the newest entry into my list of menus that have made the cut. This isn’t quite as nice as the others in the usability department. It’s missing the one critical feature that I find really makes a fly-out navigation menu usable: a time delay between mouse out and mouse over. This is critical in vertical menus where a person will often want to drag their mouse from a main link diagonally to the sub-menu while crossing over another top-level menu. The above 3 menus add a delay, so one can safely do that. This menu, like many, many others does not, so it can be frustrating to use. All that said, this is about as user-friendly and accessible one can get with a pre-built asp.net control. Alas, asp.net is notoriusly weak in the accessibility department if one uses the built in controls, so this is a very nice option to see.

I hope these options help if you are ever given the task of implementing a fly-out navigation system. If anyone knows of any other options that are both usable and accessible, please let me know!