accessible drop downs / journal / hicksdesign

14/10/03

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.

Technorati Tags Tags: css, design, menus, webstandards

Comments | RSS

Jan Korbel said 1746 days ago:

if we were living in perfect world this:
http://www.pixy.cz/blogg/clanky/csshiermenu/
would work on every browser.
regretably we do not ;)

Jon Hicks said 1746 days ago:

Aaah that Pixy chap again - he gets everywhere!

Agreed - this is such a simple and accessible solution, but as usual, the most used browser lets us down.

Christopher Holland said 1746 days ago:

Yeah, I've had the same list o' prerequisites that you have there. I decided to use pure-CSS menus.

Only about 7% of my viewers are using IE varients and I offer the option of clicking on the main menu item to display a normal list-view version of the items in the menu. But, I admit that my user-base is not a normal one and I certainly wouldn't make this choice for one of my clients' sites. I like the variation that you have put on it here.

BTW, I'm still working on the IE version of the stylesheets so the site doesn't look correct in that browser yet. Everything else seems to be peachy.

Shaun Inman said 1745 days ago:

Ooh, that Pixy link is tasty. I played with it a little last night and got it to work in IE 5 Mac OS 9/X without modifying the markup using an unobtrusive script. But It still doesn't work in IE PC. I think I need to build in a delay to stall IE from collapsing the menu until you get to the next menu item. As such it's still buggy and not ready for prime time but I figured someone else might want to build on it.

Anne van Kesteren said 1744 days ago:

On a thread at AccessifyForum can be found some really good solutions for this problem.

PS: You have a layout problem in Mozilla, when I preview my comment.