SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Oct 13, 2008, 20:23 #1
Progressive Enhancement and JS Dropdowns
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.
-
Oct 13, 2008, 21:13 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try using this instead: http://carroll.org.uk/sandbox/suckerfish/bones2.html
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 13, 2008, 21:39 #3
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.
-
Oct 13, 2008, 21:42 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 13, 2008, 21:50 #5
Thanks again. I'll have a crack at it and post back later on if I have problems.
Bookmarks