htmlcssjavascriptnavigasimenuMenengah10 mnt baca

Mega Menu

Membangun menu navigasi besar multi-kolom seperti di situs e-commerce besar.

Kenapa Mega Menu?

Situs besar (Tokopedia, IKEA) punya ratusan kategori. Dropdown biasa tidak cukup; mereka memakai mega menu: panel lebar penuh berisi beberapa kolom link plus area promo. Ini mengajarkan positioning lanjutan dan hover intent.

Langkah Membangun

HTML: Navbar biasa, tapi salah satu item menu (<li class="punya-mega">) berisi <div class="mega"> dengan 3-4 kolom link dan satu kolom banner promo.

CSS: Mega panel memakai position: absolute; left: 0; right: 0 relatif terhadap navbar (bukan terhadap item menu) agar selebar penuh. Muncul saat parent di-hover (.punya-mega:hover .mega). Tambahkan sedikit delay sebelum hilang agar mouse sempat bergerak (pakai transition-delay atau padding tak terlihat sebagai "jembatan").

JS: Untuk perangkat sentuh, hover tidak ada. Tambahkan klik toggle untuk membuka/menutup mega menu di HP, dan tutup saat klik di luar (pola yang sama dengan dropdown).

Hover Intent

Masalah klasik: mouse bergerak diagonal melewati menu lain dan mega menu berkedip-kedip. Solusi sederhana: beri jeda 150-200ms sebelum menutup (setTimeout yang di-clear saat mouse kembali). Library besar memakai algoritma prediksi arah mouse, tapi delay sederhana cukup untuk kebanyakan kasus.

Kesalahan Umum

  • Mega panel hanya selebar item menu (lupa position relative di navbar sebagai acuan).
  • Menu tertutup saat mouse bergerak dari tombol ke panel (tidak ada jembatan/padding).
  • Di HP mega menu tidak bisa dibuka karena hanya mengandalkan hover.
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Pencarian di Mega Menu

Tambahkan kotak pencarian kecil di dalam mega menu yang memfilter link-link di semua kolom secara real-time.