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.
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>
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
Cara Membuat Animasi Setelah Halaman Web/Blog Termuat
Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan di ... 
Pakai Credit Link ? Gengsi !
Seperti itulah segelintir Blogger yang saya temui selama ini. Saya memulai ngeblog dari tahun 2013, saat itu saya masih kelas 1/2 SMP, saya mempunyai ketertarikan pada blog na ... 
Cara Paling Mudah Memotong Snippet Tanpa JS
Pernahkah kawan merasa risih dengan snippet bawaan blogger yang memiliki kode <data:post.snippet> terasa terlalu panjang terutama pada post homepage ? Jika pernah ... 
Ngarepnya SNMPTN Dapatnya SBMPTN
Setelah sekian lama saya melalui lika-liku perjalanan pendaftaran masuk PTN, akhirnya saya sampai juga di bagian pembayaran UKT dan sudah menjadi MABA. Dalam artikel ini, saya ... 
Indonesia Tidak Dijajah Selama 350 Tahun !
Indonesia dijajah selama 350 tahun !, itulah selama ini yang tertanam diotak kita tentang berapa lama kita dijajah. Selama duduk di bangku sekolah pun jika ada pertanyaa ...
