Create A Pretty Accordion Menu with jQuery and CSS3

A nice-looking and animated animated accordion menu built on top of Font Awesome, CSS3 and a little jQuery script.

How to use it:

1. Include the Font Awesome 4 for the title bar icons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create an accordion menu using Html unordered lists. Add the CSS class 'active' to a list item you wish to make it open by default.

<div id="accordian">
  <ul>
    <li>
      <h3><span class="fa fa-dashboard"></span>Dashboard</h3>
      <ul>
        <li><a href="#"> Item 1 </a></li>
        <li><a href="#"> Item 2 </a></li>
        <li><a href="#"> Item 3 </a></li>
        <li><a href="#"> Item 4 </a></li>
      </ul>
    </li>
    <li class="active">
      <h3><span class="fa fa-tasks"></span>Tasks</h3>
      <ul>
        <li><a href="#"> Item 1 </a></li>
        <li><a href="#"> Item 2 </a></li>
        <li><a href="#"> Item 3 </a></li>
        <li><a href="#"> Item 4 </a></li>
      </ul>
    </li>
    <li>
      <h3><span class="fa fa-calendar"></span>Calendar</h3>
      <ul>
        <li><a href="#"> Item 1 </a></li>
        <li><a href="#"> Item 2 </a></li>
        <li><a href="#"> Item 3 </a></li>
        <li><a href="#"> Item 4 </a></li>
      </ul>
    </li>
    <li>
      <h3><span class="fa fa-heart"></span>Favorites</h3>
      <ul>
        <li><a href="#"> Item 1 </a></li>
        <li><a href="#"> Item 2 </a></li>
        <li><a href="#"> Item 3 </a></li>
        <li><a href="#"> Item 4 </a></li>
      </ul>
    </li>
  </ul>
</div>

3. The required CSS/CSS3 to style the accordion menu.

#accordian {
  background-color: #004050;
  box-shadow: 0 5px 15px 1px rgba(0,0,0,.6), 0 0 200px 1px rgba(255,255,255,.5);
  color: white;
  margin: 100px auto 0 auto;
  width: 250px;
}

/*heading styles*/


#accordian h3 {
  /*fallback for browsers not supporting gradients*/
  background: #003040;
  background: linear-gradient(#003040, #002535);
  cursor: pointer;
  font-size: 12px;
  line-height: 34px;
  padding: 0 10px;
}

/*heading hover effect*/


#accordian h3:hover { text-shadow: 0 0 1px rgba(255,255,255,.7); }

/*iconfont styles*/


#accordian h3 span {
  font-size: 16px;
  margin-right: 10px;
}

/*list items*/


#accordian li { list-style-type: none; }

/*links*/


#accordian ul ul li a {
  color: white;
  display: block;
  font-size: 11px;
  line-height: 27px;
  padding: 0 15px;
  text-decoration: none;
  transition: all 0.15s;
}

#accordian ul ul li a:hover {
  background-color: #003545;
  border-left: 5px solid lightgreen;
}

/*Hiding the non-active list items by default*/


#accordian ul ul { display: none; }

#accordian li.active ul { display: block; }

4. Include the latest version of jQuery library at the end of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

5. The Javascript to enable the accordion menu.

$(document).ready(function() {
  $("#accordian h3").click(function() {
    //Slide up all the link lists
    $("#accordian ul ul").slideUp();
    //Slide down the link list below the h3 clicked - only if it's closed
    if(!$(this).next().is(":visible")) {
      $(this).next().slideDown();
    }
  })
})

---

This awesome jQuery plugin is developed by Stephanie_Cunnane. For more Advanced Usages, please check the demo page or visit the official website.