SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    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/

  5. #5
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. I'll have a crack at it and post back later on if I have problems.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •