MenusLesson 48Preview gratis
Collapsed Sidebar
Lesson ini bagian dari How To · Semua level
Ringkasan
Sidebar yang dapat diciutkan adalah panel navigasi di sisi halaman yang bisa disembunyikan saat tidak dipakai. Pola ini menjaga area konten tetap luas, terutama pada layar kecil. Biasanya sidebar digeser keluar layar dengan CSS, lalu tombol menu mengubah kelasnya lewat JavaScript.
Poin kunci
- Sidebar diposisikan fixed dan disembunyikan dengan width: 0 atau transform: translateX(-100%).
- Tombol toggle menambah atau menghapus kelas .open melalui classList.
- Properti transition membuat gerakan buka-tutup terasa halus.
- Overlay di atas konten memudahkan pengguna menutup sidebar dengan klik di luar panel.
- Atribut aria-expanded dan aria-controls membantu pembaca layar memahami status menu.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.