Hicks

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

Gazingus.org’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.