Menu vertikal accordion dengan CSS3

Ini adalah posting pembaharuan dari posting Menu vertikal accordion dengan CSS3 sebelumnya yang sudah usang.

Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan bekerja pada browser yang mendukung properti CSS3. cara dan langkajnya silahkan disimak dibawah ini:

 CSS

@import url(http://fonts.googleapis.com/css?family=Nunito);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

* {margin: 0; padding: 0;}

body {
 background: #4EB889;
 font-family: Nunito, arial, verdana;
}
#accordian {
 background: #004050;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 background: #003040; 
 background: linear-gradient(#003040, #002535);
}

#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
 font-size: 16px;
 margin-right: 10px;
}

#accordian li {
 list-style-type: none;
}
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 11px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 transition: all 0.15s;
}
#accordian ul ul li a:hover {
 background: #003545;
 border-left: 5px solid lightgreen;
}

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

HTML

<div id="accordian">
 <ul>
  <li>
   <h3><span class="fa fa-tachometer"></span>Dashboard</h3>
   <ul>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Graphs</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <!-- we will keep this LI open by default -->
  <li class="active">
   <h3><span class="fa fa-tasks"></span>Tasks</h3>
   <ul>
    <li><a href="#">Today's tasks</a></li>
    <li><a href="#">Urgent</a></li>
    <li><a href="#">Overdues</a></li>
    <li><a href="#">Recurring</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <li>
   <h3><span class="fa fa-calendar"></span>Calendar</h3>
   <ul>
    <li><a href="#">Current Month</a></li>
    <li><a href="#">Current Week</a></li>
    <li><a href="#">Previous Month</a></li>
    <li><a href="#">Previous Week</a></li>
    <li><a href="#">Next Month</a></li>
    <li><a href="#">Next Week</a></li>
    <li><a href="#">Team Calendar</a></li>
    <li><a href="#">Private Calendar</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <li>
   <h3><span class="fa fa-heart"></span>Favourites</h3>
   <ul>
    <li><a href="#">Global favs</a></li>
    <li><a href="#">My favs</a></li>
    <li><a href="#">Team favs</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
 </ul>
</div>

jQuery

/*jQuery time*/
$(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 its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})

DEMO