Menu vertikal accordion dengan CSS3

Navigasi
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


15 komentar

  1. mas apdet teruss yaa
    ga cape kah share tutorial...
    sy kira itu perlu waktu untuk membahas suatu tutor

    BalasHapus
    Balasan
    1. hehe, ini sudah saya otomatiskan sob. capenya ilang asal bsa berbagi ilmu, karena tutor yg sya bgikan dsni ini kbnyakan tutor lama...

      Hapus
  2. gan enggak ngerti, itu kodenya harus di taruh dimana aja, saya kurang ngerti. :(
    padahal ini kayanya yang saya sedang cari2.
    jika berkenan tolong di jawab :)

    Terima kasih

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
    2. kode yang harus di letakan di bawah sidebar-wrapper. itu yang mana mass ?

      Hapus
  3. ALHAMDUHLILLAH DPT 127 JUTA.DAN SAYA SELAKU PEMAIN TOGEL,DAN KEPERCAYAAN ITU ADALAH SUATU KEMENANGAN DAN SAAT SKRAG SY TEMUKAN ORANG YG BISA MENGELUARKAN ANGKA2 GAIB YAITU MBAH RORO JIKA ANDA YAKIN DAN PERCAYA NAMANYA ANGKA GOIB ANDA BISA HUBUNGI LANSUNG HUB MBAH RORO DI NO_ 085394537578 Buktikan.

    BalasHapus
  4. ALHAMDUHLILLAH DPT 127 JUTA.DAN SAYA SELAKU PEMAIN TOGEL,DAN KEPERCAYAAN ITU ADALAH SUATU KEMENANGAN DAN SAAT SKRAG SY TEMUKAN ORANG YG BISA MENGELUARKAN ANGKA2 GAIB YAITU MBAH RORO JIKA ANDA YAKIN DAN PERCAYA NAMANYA ANGKA GOIB ANDA BISA HUBUNGI LANSUNG HUB MBAH RORO DI NO_ 085394537578 Buktikan.

    BalasHapus
  5. kenapa di blog ini ga pake menu acordio?

    BalasHapus
    Balasan
    1. Mnu ini biasanya untuk meringkas sidebar yang pnuh dngan elemen/widget. D blog ini sidebarnya masih luang jd tdk prlu sob

      Hapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. ini mah keren mas,,, boleh di terapkan di template demo nih :D

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...