MenusLesson 49Preview gratis
Collapsed Sidepanel
Lesson ini bagian dari How To · Semua level
Ringkasan
Sidepanel adalah panel yang meluncur dari sisi layar dan menutupi sebagian konten, bukan menggeser tata letak halaman. Panel seperti ini cocok untuk menu tambahan, detail produk, atau pengaturan cepat. Kontrol buka-tutupnya mirip sidebar, tetapi posisi dan lapisan tampilannya perlu diperhatikan agar tidak bertabrakan dengan elemen lain.
Poin kunci
- Sidepanel umumnya muncul dari kanan dan menutupi konten dengan position: fixed.
- transform: translateX(100%) menyembunyikan panel di luar tepi kanan.
- z-index memastikan panel berada di atas konten dan overlay.
- Tombol Escape dapat dipasang sebagai jalan pintas untuk menutup panel.
- Transisi sebaiknya hanya menganimasikan transform atau opacity agar tetap mulus.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.