Membuat Daftar Menu Dengan Toggle

Oke sebagai awalan saya ingin memberitahu bahwa toggle yang dimaksud bukan angka togel yah =D.
Kali ini singkat saja, saya akan memberikan sebuah tutorial tentang cara membuat menu dengan memanfaatkan fungsi toggle. Umumnya fungsi ini digunakan untuk membuat sebuah spoiler, tapi yang lain juga bisa sih dikarenakan toggle itu menyembunyikan sebuah elemen, dan elemen itu punya arti luas, bisa gambar, foto, image, picture, dll =D.

Sekarang kita akan membuat sebuah daftar menu yang dapat di show/hide dengan satu tombol. Cek link berikut.

Demo

Oke kita langsung praktek.
Sebelumnya pastikan kamu sudah memasang library jQuery dan Font-Awesome.

<style>
.daftartaut li:last-child {margin-bottom:-16px}
.daftartaut li:first-chiild{padding-top:4px}
.daftartaut li a {font-size:14px;color: #fff;padding-left: 3px;text-transform: uppercase;text-decoration: none;}
.daftartaut li {padding: 6px}
.daftartaut li:hover {background:#222}
.daftartaut li:hover a {color:#fff}
#tombol3{padding:5px;color: #fff;border:none;background: transparent;font-size: 24px;cursor:pointer;transition: .3s}
#buka{display:none;text-align:left;color:#fff;position: absolute;min-width: 150px;height:auto;background: #333;margin-top: 8px;box-shadow:1px 1px 3px rgba(0,0,0,0.5)}
.kotakkan {width:30px;height:30px}
.list-unstyled {padding-left: 0;list-style: none;margin-top:0}
</style>
<div class='kotakkan'>
<button id='tombol3'><i class='fa fa-bars'></i></button>
<div class='collapse' id='buka'>
<ul class='daftartaut list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Faq</a></li>
<li><a href='#'>Partner</a></li>
</ul>
</div>
</div>
<script>
 $(document).ready(function(){
  $("#tombol3").click(function(){
    $("#buka").slideToggle(700)
  });
});

</script>

Sengaja saya satukan dan tidak tercerai berai kodenya =D itu dimaksudkan supaya kawan yang belum terlalu memahami pemasangan kodenya bisa lebih termudahkan.
Jika kamu mau memasangnya didalam header, kamu bisa taruh dibawah kode header contohnya <div id='header-wrapper'> atau <div class='header'> atau kode pembungkus header yang serupa.
Untuk mengatur posisi tombol toggle, saya sudah pasangkan containernya yang diberi class .kotakkan silahkan diubah sendiri posisi margin jika belum tepat.

Silahkan ditanyakan jika kurang mengerti. Sekian dan terima gaji.

Artikel Terkait