MenusLesson 17Preview gratis
Side Navigation
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi Samping Interaktif (Side Navigation / Sidenav) yang dapat dibuka dan ditutup menggunakan animasi geser JavaScript. Saat tombol menu diklik, lebar sidebar bertransisi halus dari 0 menjadi 250px (atau menutupi seluruh layar), lengkap dengan tombol silang penutup (X).
Poin kunci
- Sidenav disetel dengan width: 0 dan overflow-x: hidden secara default
- Fungsi openNav() mengatur style.width menjadi '250px' melalui JavaScript
- Fungsi closeNav() mengembalikan style.width menjadi '0'
- Menerapkan CSS transition: 0.5s pada properti width untuk animasi pembukaan yang mulus
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.