Menu dropdown adalah salah satu fitur yang sering ditemukan pada website. Fitur ini memudahkan pengguna dalam mengakses berbagai halaman atau kategori dengan lebih mudah. Pada artikel kali ini, kita akan membahas cara membuat menu dropdown sederhana untuk website Anda.
1. Mempersiapkan HTML
Langkah pertama yang perlu dilakukan adalah mempersiapkan HTML untuk menu dropdown. Buatlah sebuah list dengan tag <ul> dan <li>. Setiap item pada list akan menjadi menu dropdown yang nantinya akan muncul saat di-hover. Berikut contoh kodenya:
<ul><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li></ul>
2. Menambahkan CSS
Setelah HTML selesai dibuat, kita perlu menambahkan CSS agar menu dropdown terlihat lebih menarik. Berikut contoh kode CSS untuk membuat menu dropdown:
ul {list-style-type: none;margin: 0;padding: 0;background-color: #f1f1f1;}li {float: left;}li a, .dropbtn {display: inline-block;color: black;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover, .dropdown:hover .dropbtn {background-color: #ddd;}.dropdown-content {display: none;position: absolute;z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}
3. Menambahkan JavaScript
Agar menu dropdown dapat muncul saat di-hover, kita perlu menambahkan sedikit JavaScript. Berikut contoh kode yang perlu ditambahkan:
function myFunction() {document.getElementById("myDropdown").classList.toggle("show");}window.onclick = function(event) {if (!event.target.matches('.dropbtn')) {var dropdowns = document.getElementsByClassName("dropdown-content");var i;for (i = 0; i < dropdowns.length; i++) {var openDropdown = dropdowns[i];if (openDropdown.classList.contains('show')) {openDropdown.classList.remove('show');}}}}
4. Menambahkan ID pada Dropdown
Setelah CSS dan JavaScript selesai dibuat, kita perlu menambahkan ID pada dropdown kita. ID ini nantinya akan digunakan oleh JavaScript untuk menampilkan menu dropdown. Berikut contoh kode yang perlu ditambahkan:
<div class="dropdown"><button onclick="myFunction()" class="dropbtn">Dropdown</button><div id="myDropdown" class="dropdown-content"><a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a></div></div>
5. Menambahkan Gambar pada Dropdown
Terakhir, kita dapat menambahkan gambar pada dropdown untuk membuat tampilan website lebih menarik. Berikut contoh kode yang perlu ditambahkan:
<div class="dropdown"><button onclick="myFunction()" class="dropbtn"><img src="dropdown.png">Dropdown</button><div id="myDropdown" class="dropdown-content"><a href="#home">Home</a><a href="#about">About</a><a href="#contact">Contact</a></div></div>
Kesimpulan
Demikianlah cara membuat menu dropdown sederhana untuk website Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat menu dropdown yang menarik dan mudah digunakan oleh pengguna. Selamat mencoba!
