CSS TutorialLesson 34Preview gratis
CSS Navigation Bars
Lesson ini bagian dari CSS · Semua level
Ringkasan
Navigation bar adalah deretan tautan menu yang umumnya dibuat dengan daftar (ul) berisi tautan (a). Dengan menghilangkan penanda daftar, mengatur tata letak inline atau flex, serta menambahkan padding dan efek hover, tautan biasa berubah menjadi menu yang rapi. Navbar modern sering ditata dengan flexbox agar mudah disesuaikan di berbagai lebar layar.
Poin kunci
- Navbar umumnya berupa <ul> berisi <a>, dengan list-style: none serta margin dan padding direset.
- Item menu dibuat sejajar dengan display: inline, inline-block, atau flex pada wadahnya.
- Pengaturan display: block pada <a> membuat area klik seluas kotak menu, bukan hanya teks.
- Efek hover dan status aktif memperjelas menu yang sedang dipilih pengunjung.
- Flexbox dengan justify-content memudahkan navbar horizontal maupun responsif sederhana.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.