GO Blog

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