Progressive Enhancement and JS Dropdowns

[Aarem]

Hello all.

I'm relatively new to web design, and am attempting to learn this discipline with best-practice in mind. I enjoyed the recent ALA article on Progressive Enhancement, and with this in mind, I have an issue on which I'd value your feedback.

I've recently been asked to code a site with a dropdown menu similar to that used by MenuMachine. I am not a fan of dropdowns in general (I think there are better ways to organize site information) but still, the client wants it, so I thought I'd see how best to do it.

I prefer CSS solutions, but I've not seen a CSS dropdown that can do what the The MenuMachine dropdown does, so I accept that JS might be the way. However, with JS turned off, the MenuMachine menu all but disappears. A <noscript> tag leaves a link to an HTML menu. I don't know why the <noscript> doesn't just present the HTML menu upfront, rather than just providing a link to it.

Anyway, my initial thought is to use a <noscript> tag that presents an HTML list menu in place of the JS menu. Is that the best option with a JS dropdown of the MenuMachine type, or is there a better way? I am not very happy with this, as it really goes against PE principles. I'd rather start with the working HTML menu, then style it with CSS, then add the JS, but I'm not sure if I can with such a menu.

Any thoughts appreciated.

[Dan Schulz]

Try using this instead: http://carroll.org.uk/sandbox/suckerfish/bones2.html

[Aarem]

Thanks for that link Dan. Certainly that method is more what I'm looking for. Do you know if there's a version that stacks vertically (I think they're called "accordion" menus)? If not, I'll see if I can adapt this one.

[Dan Schulz]

Just need to modify the CSS, I believe. The original Son of Suckerfish CSS menu code should be a good enough baseline for converting the one above to an accessible format.

http://www.htmldog.com/articles/suckerfish/dropdowns/

[Aarem]

Thanks again. I'll have a crack at it and post back later on if I have problems.