Notoptimal Dev’s New YUI-Based Accordion Menu

June 6, 2008 at 10:04 pm by Eric Miraglia | In Development | 4 Comments

Visit Notoptimal Dev's blog post about the new Accordion Menu.

Visit Notoptimal Dev's blog post about the new Accordion Menu.Juan I. Leon at Notoptimal Dev went looking for the perfect Accordion Menu recently, but the search was not a success. The criteria:

  • be lightweight
  • use unobtrusive Javascript techniques (ie not have scattered Javascript all over the markup)
  • use simple CSS to make it look nice
  • needed to support both single and multiple sections opened at a time.

Writes Juan: “My search came up short. Most were overly complicated, or they required libraries other than what I already have running on my sites. Too much bloat. I guess I’d have to write my own. Since I already use the *radical* YUI libraries on my sites, making it YUI-powered was the way to go for me. I set my goal to <100 lines of good OO unobtrusive Javascript. The current version sits at 80 LOC with lots of comments.”

You can check out the blog article or jump directly to the example.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

4 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Unforunately, as of June 7 2008 this doesn’t work in Internet Explorer.

    Comment by Michael — June 7, 2008 #

  2. Woops! Color me embarrassed. Thanks to the heads up from satyam, I’ve now corrected the bug. It was actually a dangling comma in one of my callback objects. I also went ahead and wrapped the init methods with onDOMReady() per satyam’s suggestion — just to be safe.

    Please let me know if there are still problems with IE.

    Comment by Juan — June 7, 2008 #

  3. As of June 9th, this works fine in Internet Explorer 7 and Internet Explorer 6.

    Comment by Peter Foti — June 9, 2008 #

  4. As of July 3,2008 it does not work in Firefox

    It is also not unobtrusive, since it wont work via keyboard or without javascript.

    maybe instead of setting a “< 100 lines of code goal” you should perhaps settled for three lines instead?

    Functionality, Compatibility and Accessibility

    Comment by tween — July 3, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.