Navbar Responsif dengan Menu Hamburger
Membuat navbar yang berubah menjadi menu hamburger di layar HP, pola wajib untuk web modern.
Masalah yang Diselesaikan
Navbar modul sebelumnya bagus di laptop, tapi di layar HP menu berderet akan berdesakan atau terpotong. Solusi standar industri: sembunyikan menu di layar kecil, tampilkan ikon hamburger (tiga garis), dan saat diklik menu muncul sebagai daftar vertikal.
Langkah Membangun
HTML: Tambahkan tombol hamburger (<button class="hamburger">) berisi tiga <span> garis. Menu tetap memakai <ul> seperti sebelumnya.
CSS: Pakai media query @media (max-width: 640px). Di dalamnya: sembunyikan .menu secara default (display: none), tampilkan tombol hamburger. Saat menu punya class open, tampilkan sebagai kolom vertikal (display: flex; flex-direction: column) yang menutupi lebar penuh di bawah navbar.
JS: Satu event listener: klik hamburger -> toggle class open pada menu memakai classList.toggle("open"). Itu saja, tidak perlu if/else manual.
Analogi
Media query itu seperti pintu otomatis mal: "kalau lebar layar di bawah 640px, lakukan aturan ini". Browser mengecek terus-menerus, jadi putar HP dari portrait ke landscape dan lihat navbar berubah sendiri.
Catatan teknis: Sembunyikan hamburger di layar besar dengan
display: nonedi CSS dasar, lalu tampilkan (display: block) hanya di dalam media query. Kebalikannya untuk menu.
Kesalahan Umum
- Menu terbuka tapi menutupi logo (atur posisi menu vertikal di bawah navbar, bukan menumpuk).
- Lupa menutup menu setelah salah satu link diklik di HP (tambahkan listener pada link untuk menghapus class
open). - Hamburger tidak bisa diklik karena tertutup elemen lain (cek
z-index).
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Animasi Hamburger jadi X
Buat ikon hamburger beranimasi menjadi tanda X saat menu terbuka: garis atas miring 45 derajat, garis tengah hilang, garis bawah miring -45 derajat. Gunakan class open pada tombol hamburger dan transisi CSS.