Features of robust dynamic menus

There are many fine examples of dynamic menus, menus that display sub menus when you hover your mouse pointer or bring focus to them in other ways, such as tabbing through links with your keyboard. I was reading a recent article on AlistApart.com regarding hybrid CSS menus, and the discussion that followed the article showed a real demand for a robust, cross-platform, accessible, dynamic menu.

Here are some features the menu should have:

  • Be written with web standards: valid xhtml, ECMAScript, and css. (There are some nice flash implementations out there, but they have accessiblity issues.)
  • The menu should degrade gracefully, allowing site visitors to navigate even when scripting is turned off in their browsers.
  • The menu should work well for people using a mouse as well as people using a keyboard.
    • When a user tabs to a main link, the sub menu should appear as though the user hovered over it with a mouse.
    • And users should be able to tab through the sub links as well.
  • The menus should work well in all mainstream, current browsers (i.e., it doesn’t need to work with Netscape 4.x or it’s peers).
  • It should allow for text-zooming, and it should remain useable when the font size triples.
  • The menus should be built with usability in mind. They should be as easy to use as possible, from a purely interface perspective. For example, the links should be easy to click on, and it should be easy to navigate a sub menu without accidentally closing it. (Review Fitt’s Law for some principles.)

I’ve seen menus that support these features, but none that support them all. In fact, Adam Richardson (business partner) wrote a very nice menu system that worked well with keyboard tabbing as well as mouse events.

Related resources:

There are many solutions implemented out there, some better than others and very few that I’ve seen have been flawless. When I get some spare time (ummm), I’d love to take a crack at this. Anyone else have a menus system that matches up to the features list above?

Leave a Reply

Your email address will not be published. Required fields are marked *