Keyboard Accessible Dropdown Menu, Part Deux
This is my take on the famous suckerfish dropdowns.
head of your document, then after your drop down menu (or on page load, whatever method you prefer) call 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:
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?
- 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.
- 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.