htmlcssjavascriptmenuPemula9 mnt baca

Dropdown Menu

Menu yang muncul saat tombol diklik dan tertutup otomatis saat klik di luar.

Apa Itu Dropdown?

Dropdown adalah menu tersembunyi yang muncul saat dipicu, seperti menu "Pilih Bahasa" atau menu profil di pojok kanan aplikasi. Ini menghemat ruang layar: puluhan pilihan disembunyikan di balik satu tombol.

Langkah Membangun

HTML: <div class="dropdown"> berisi <button> pemicu dan <ul class="isi"> daftar pilihan yang awalnya tersembunyi.

CSS: Kontainer dropdown memakai position: relative, daftarnya position: absolute sehingga muncul melayang di bawah tombol tanpa menggeser konten lain. Daftar disembunyikan dengan display: none, ditampilkan saat punya class buka (display: block) plus animasi fade-slide kecil.

JS: Ada dua listener penting:

  1. Klik tombol: toggle class buka.
  2. Klik di mana saja pada dokumen: kalau klik BUKAN di dalam dropdown, tutup dropdown. Caranya: document.addEventListener("click", ...) lalu cek !dropdown.contains(e.target).

Pola "klik di luar untuk menutup" ini dipakai di hampir semua komponen popup (modal, tooltip, date picker).

Kesalahan Umum

  • Lupa stopPropagation atau cek contains sehingga dropdown langsung tertutup begitu dibuka (klik tombol juga dihitung sebagai klik dokumen).
  • Dropdown terpotong oleh kontainer yang punya overflow: hidden.
  • Tidak bisa diakses keyboard (tambahkan penanganan tombol Escape untuk menutup).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Dropdown Multi-Level

Tambahkan submenu di dalam "English": saat di-hover, muncul pilihan "American" dan "British" mengambang ke kanan. Ini pola menu bertingkat seperti di aplikasi desktop.