Keyboard Accessible Dropdown Menu, Part Deux

This is my take on the famous suckerfish dropdowns.

This menu is fully keyboard accessible and can have an infinite level of sub-menus. It is also keyboard accessible to modern browsers when JavaScript is disabled.

• Home
• Menu Item 1
• Menu Item 2
  • Second Level 1
  • Second Level 2
    • Third Level 1
    • Third Level 2
    • Third Level 3
  • Second Level 3
• Menu Item 3
• Menu Item 4
  • Second Level 4
    • Third Level 4
      • Fourth Level 1
      • Fourth Level 2
        • Fifth Level 1
        • Fifth Level 2
        • Fifth Level 3
      • Fourth Level 3
  • Second Level 5

Using this menu is easy, simply include the JavaScript file in the head of your document, then after your drop down menu (or on page load, whatever method you prefer) call the dropdown() function.

The dropdown() function takes three parameters: the ID of the dropdown menu, the class you wish to apply to list items when they are active, and the mouse off delay. An example call looks like:

<script type="text/javascript">dropdown('nav', 'hover', 250);</script>

This means the dropdown menu will apply to the list with an ID of nav. When you hover over a list item it will have the class hover applied to it, and that class will stay on the list item for 250ms after you mouse off.

Why use this menu?

• When JavaScript is enabled this menu is fully keyboard accessible. You can tab through the menu and it works just as well as it does for a mouse user.
• Mouse users get a little bit of extra usability in the form of a mouse off delay, this allows the mouse to “slip” off the menu for a short period without losing their place.
• You can have an infinite level of sub-menus, the only change you’ll need to make to accomodate more than 5 is to the IE6 stylehseet.
• When JavaScript is disabled it is still keyboard accessible in modern browsers, although you can only see the currently active menu item.
• As with other menus this menu still works for mouse users when JavaScript is disabled, although you lose the mouse off delay.
• It’s very flexible. You can modify the CSS to turn it into just about any sort of menu you can imagine. Feel free to grab the source code and have a play. If you have any examples you’d like to show off send me an e-mail and I’ll post a link.
• Tested on Firefox, IE7, IE6, and Opera. Tested it in other browsers? Let me know.

Keyboard Accessible Dropdown Menu, Part Deux by Blake Haswell. Questions or comments? E-mail me.