MenusLesson 11Preview gratis
Responsive Topnav
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini mengulas pembuatan Bilah Navigasi Atas Responsif (Responsive Topnav). Di layar desktop, menu tampil berjajar mendatar. Ketika layar menyempit (layar smartphone), menu terlipat menjadi satu baris dengan tombol hamburger icon di sudut kanan yang dapat diklik untuk membuka tautan ke bawah.
Poin kunci
- Menyematkan tombol ikon 'hamburger' yang tersembunyi di layar lebar menggunakan CSS Media Queries
- Menambahkan kelas .responsive pada elemen topnav menggunakan JavaScript saat ikon diklik
- Mengubah orientasi tautan dari float mendatar menjadi tumpukan vertikal di layar ponsel
- Menerapkan @media screen and (max-width: 600px) untuk breakpoint perangkat seluler
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.