Superfish!

I'm a big fan of the jQuery javascript framework and also love some slick, animated dropdown navigation menus. But what about screen readers, what about people with javascript turned off? Typically, these sort of javascript-based DHTML dropdowns are not very usable or even accessible for certain users. And if your site navigation is not accessible, you're in big trouble.

I've been using a 'Superfish' powered navigation for my current project. You can check out the Superfish project page here. Superfish takes a simple nested UL list and uses jQuery and CSS to turn it into a nice dropdown menu. Superfish allows you to customize the menu with arrows, shadows, animations. It also builds in support for some IE6 display issues and integrates the hoverIntent plugin.

 

<quick aside>Ironworks developer Chris Kimmelshue turned me on to the hoverIntent plugin 

a few months ago and it's a great addition to any interactive element. What it does is very simple, it just makes any rollover area a little less 'sticky', allowing the user to quickly roll in and out of the hotspot without collapsing the menu. Cut your users some slack people!</aside>

 

I did encounter a minor issue that you may run into. Some of my menu items have extensive dropdowns, some do not. Superfish expects all menu items to have dropdowns and fails when there is not a nested UL present. As usual, the internet came to my rescue with this bit of code. (thank you internet!).

 

So Superfish displays nicely across browsers for those of us that still have to support IE6, it degrades very nicely to CSS only for those with javascript turned off. And it's also fully keyboard accessible and screen-reader friendly. Your site navigation is probably the most-used interactive feature on your website. Make sure it's bulletproof, accessible and fun to use!