Accordian menu adalah bentuk menu navigasi yang dibuat secara vertikal ataupun horisontal saat diklik dapat menampilkan atau menyembunyikan elemen di dalamnya.
Tampilan accordian menu menjadi lebih interaktif lagi dengan menambahkan JavaScript atau plugin jQuery yang sudah tersedia.
Koding syntak di bawah ini saya kutip dari W3schools.
Langkah Pertama : HTML
Silahkan Anda masukkan kode syntak html di bawah ini:
<button class="accordion">Menu 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Menu 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Menu 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>
Langkah Kedua: CSS
Selanjutnya Anda masukkan style CSS-nya
/* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; }
Langkah Ketiga : JavaScript
Dan yang terakhir Anda masukkan kode JavaScript supaya Accordian Menu ini akan berjalan dengan sempurna.
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }
Tampilan akhir akan menjadi seperti ini:
See the Pen Simple Accordian Menu by Ahmad Fahrurroji (@afahrurroji) on CodePen.
Leave a Reply