ViralPatel.net

[ad name=”AD_INBETWEEN_POST”] Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area. We will use jQuery effects to animate the accordion menu. jQuery provides Fade In/Fade Out effect, but accordion menu looks more realistic if we use Slide In / Slide Out effect. Related: 20 jQuery Tips & Tricks

Step 1: Create HTML for your Menu

First we will create HTML for displaying out Menu. We will use List in HTML to render the menu and then we will use CSS to apply some style. Following will be our Menu code:

<ul id="accordion">
 <li><div>Sports</div>
  <ul>
   <li><a href="#">Golf</a></li>
   <li><a href="#">Cricket</a></li>
   <li><a href="#">Football</a></li>
  </ul>
 </li>
 <li><div>Technology</div>
  <ul>
   <li><a href="#">iPhone</a></li>
   <li><a href="#">Facebook</a></li>
   <li><a href="#">Twitter</a></li>
  </ul>
 </li>
 <li><div>Latest</div>
  <ul>
   <li><a href="#">Obama</a></li>
   <li><a href="#">Iran Election</a></li>
   <li><a href="#">Health Care</a></li>
  </ul>
 </li>
</ul>
Code language: HTML, XML (xml)

If you check the HTML page now it should look something like:

Step 2: Apply some style to your Menu using CSS

Lets apply some stylesheet to our menu. Copy following CSS code in your HTML file:

#accordion {
 list-style: none;
 padding: 0 0 0 0;
 width: 170px;
}
#accordion div {
 display: block;
 background-color: #FF9927;
 font-weight: bold;
 margin: 1px;
 cursor: pointer;
 padding: 5 5 5 7px;
 list-style: circle;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#accordion ul {
 list-style: none;
 padding: 0 0 0 0;
}
#accordion ul{
 display: none;
}
#accordion ul li {
 font-weight: normal;
 cursor: auto;
 background-color: #fff;
 padding: 0 0 0 7px;
}
#accordion a {
 text-decoration: none;
}
#accordion a:hover {
 text-decoration: underline;
}
Code language: CSS (css)

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, but it will not work with Internet Explorer. If we want to change the look n feel for internet explorer, we may want to include IE-Specific stylesheet to our HTML page. Once we apply the stylesheet, our menu will look like:

Step 3: Give life to your Menu using jQuery

So our basic skeleton is complete. We have used HTML code to display the Accordion menu content and then have applied CSS stylesheet to improve the usability. Let us add life to this accordion menu using jQuery. Copy following jQuery code to the HTML page:

$("#accordion > li > div").click(function(){

 if(false == $(this).next().is(':visible')) {
  $('#accordion ul').slideUp(300);
 }
 $(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
Code language: JavaScript (javascript)

If you notice the above code, we have made the first menu item in accordion menu visible.

$('#accordion ul:eq(0)').show();
Code language: JavaScript (javascript)

To make a menu item visible by default, just add its index value to the above code. For example to display 1st menu item we added eq(0) in above code.

Online Demo

No article is complete without an online demo. Here is the online demo for Accordion Menu.

VIEW DEMO DOWNLOAD