MainelyDesign.com Blog

Jquery Accordion Menu - Expanding UL Menu

Posted on 11/17/2009 at 01:25 pm by Kevin Wentworth
Viewed 33,362 times | 0 comments

I looked around and found some interesting examples and existing plugins for creating an accordion menu in Jquery.  What I was looking for was a nested unordered list (UL) that would collapse and expand based on which menu item was clicked.  If there wasn't a child UL, then the menu link should be clickable, instead of an accordion.  Sounds simple right?

Semantic HTML Markup

I wanted to keep my HTML clean, and for me that means using semantically correct UL/LI for presenting the menu/navigation options.  The jqueryui accordion plugin wants you to use <h3> and <div> (although I think it is configurable).  I actually had an issue getting jqueryui to work, so I abandoned it as an option for my jquery accordion menu.  Here's what my HTML looks like:

Show Plain Text
  1. <div id="sideNav">
  2. <ul>
  3. <li><a href="/section.php">Section 1</a>
  4.     <ul>
  5.     <li><a href="/link.php">Link 1</a></li>
  6.     <li><a href="/link.php">Link 2</a></li>
  7.     <li><a href="/link.php">Link 3</a></li>
  8.     <li><a href="/link.php">Link 4</a></li>
  9.     </ul>
  10. </li>
  11. <li><a href="/section.php">Section 2</a>
  12.     <ul>
  13.     <li><a href="/link.php">Link 5</a></li>
  14.     <li><a href="/link.php">Link 6</a></li>
  15.     </ul>
  16. </li>
  17. <li><a href="/section.php">Section 3</a></li>
  18. <li><a href="/section.php">Section 4</a></li>
  19. <li><a href="/section.php">Section 5</a></li>
  20. </ul>
  21. </div>

The JQuery Accordion Javascript Code

In order to make the accordion work, I took the unobtrusive approach, meaning the entire menu will show if javascript is disabled, but if it's enabled all li's that have a child ul will be hidden.  Also, if the class of the link (in the expanding ul) is set to current, that accordion will be expanded by default.  There is no customization, plugin, etc. so please use as you see fit.

Show Plain Text
  1. $(document).ready( function() {
  2.     $('div#sideNav li > ul').hide();    //hide all nested ul's
  3.     $('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded');  //show the ul if it has a current link in it (current page/section should be shown expanded)
  4.     $('div#sideNav li:has(ul)').addClass('accordion');  //so we can style plus/minus icons
  5.     $('div#sideNav li:has(ul) > a').click(function() {
  6.         $(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
  7.         $(this).next('ul').slideToggle('fast');
  8.         $(this).parent().siblings('li').children('ul:visible').slideUp('fast')
  9.             .parent('li').find('a').removeClass('accordionExpanded');
  10.         return false;
  11.     });
  12. });

The CSS for Making the Accordion Menu Pretty

Not much CSS is needed.  The selector hooks are pretty straightforward.  After the jquery runs, the li's that contain an accordion menu will have a class of accordion.  If the accordion is expanded the li > a will have a class of accordionExpanded. Here's a snippet of my CSS for making the plus/minus icons:

Show Plain Text
  1. div#sideNav li.accordion a {
  2.     background-image: url(../img/template/plus-minus.gif);
  3.     background-repeat: no-repeat;
  4.     background-position: top right;
  5.     padding-right: 20px;
  6. }
  7. div#sideNav li.accordion a.accordionExpanded {
  8.     background-position: 100% -15px;
  9. }
  10. div#sideNav li.accordion li a {
  11.     background-image: none; /* undo above for sub links */
  12.     padding-right: 0px;
  13. }

All you have to do is make styles for the li.accordion and a.accordionExpanded.  I switched out the background image.  Here's how mine turned out.  Once the site is live, I'll post the link to it.

Jquery Accordion Menu Example

BTW, tested in IE7, IE8 and FF3.

Cheers,

-Kevin Wentworth

Bookmark and Share

7 Related Articles

Tags for Jquery Accordion Menu - Expanding UL Menu

Jquery | Example | Web Design | Css

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design