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

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-58@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

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-47<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

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-12/*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