accessible drop downs

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

  • I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future

  • I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential

  • It had to show all links ‘flat’ if the user had javascript disabled

  • Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.

  • I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible

  • I wanted to control the look completely with CSS

  • And the moon on a stick please’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Hooray for Netscape DevEdge, where I finally found their Hybrid-CSS JS menus which fulfilled all my needs. Also, through this article I came across another alternative at Brainjar’s. This uses event handlers, but is more flexible with its css and javascript.


Call Jon Hicks on +44 (0)7917 391536
Tweet @hicksdesign

Hicks Design
Hexagon House
Avenue 4, Station Lane
Witney, OX28 4BN
United Kingdom