CARA MEMBUAT MENU DROPDOWN DENGAN JAVASCRIPT

Membuat menu dropdown dengan JavaScript tidaklah sesulit yang kamu pikirkan. Dalam terjemahan sederhana, menu dropdown adalah pilihan menu yang ‘turun’ saat kamu mengarahkan kursor ke elemen tertentu di halaman web. Menu ini sangat berguna untuk membuat situs web lebih rapi dan terorganisir. Mari kita mulai pembelajaran kita!

Persiapan

Sebelum memulai, pastikan kamu sudah memiliki pengetahuan dasar tentang HTML dan CSS karena kita akan menggunakan struktur dan gaya yang dibuat dengan HTML dan CSS, lalu menambahkan fungsionalitas dengan JavaScript.

Struktur HTML

Kita mulai dengan pembuatan struktur HTML untuk menu dropdown. Buatlah sebuah elemen <div> dengan class ‘dropdown’. Di dalam elemen ‘dropdown’, kita tambahkan elemen <button> sebagai pemicu dan sebuah elemen <div> lainnya dengan class ‘dropdown-content’ yang akan memuat item-item menu.

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Gaya CSS

Kemudian, kita berikan gaya CSS pada elemen tersebut. Tujuannya agar menu dropdown terlihat rapi dan menarik. Kamu bisa mengubah gaya sesuai selera, berikut adalah contoh sederhananya:

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Fungsi JavaScript

Sekarang, kita akan menambahkan fungsi JavaScript. JavaScript dibutuhkan untuk memberikan interaktifitas pada menu dropdown. Script yang kita gunakan cukup sederhana. Ketika pengguna mengklik tombol, elemen dengan class ‘dropdown-content’ akan muncul atau hilang.

// Mengambil elemen dropdown
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  // Menambahkan event listener untuk setiap tombol dropdown
  dropdown[i].addEventListener("click", function() {
    // Menampilkan atau menyembunyikan konten dropdown
    this.nextElementSibling.classList.toggle("show");
  });
}

Kesimpulan

Menu dropdown adalah elemen web yang sangat penting dalam fungsi navigasi. Dengan JavaScript, kamu bisa membuat menu dropdown yang interaktif dan menarik. Jika ditambahkan dengan kreativitas dalam mendesain CSS, hasilnya pasti akan membuat website kamu jauh lebih profesional dan user-friendly. Selamat mencoba!