Bilah Navigasi CSS
Demo: Bilah Navigasi
Bilah Navigasi
Memiliki navigasi yang mudah digunakan penting untuk situs web mana pun.
Dengan CSS Anda dapat mengubah menu HTML yang membosankan menjadi bilah navigasi yang menarik.
Bilah Navigasi = Daftar Tautan
Bilah navigasi membutuhkan HTML standar sebagai basis.
Dalam contoh kami, kami akan membuat bilah navigasi dari daftar HTML standar.
Bilah navigasi pada dasarnya adalah daftar tautan, jadi menggunakan elemen <ul> dan <li> sangat masuk akal:
Contoh
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Sekarang mari kita hapus bullet dan margin dan padding dari daftar:
Contoh
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Contoh menjelaskan:
list-style-type: none;- Menghapus peluru. Bilah navigasi tidak memerlukan penanda daftar- Mengatur
margin: 0;danpadding: 0;menghapus pengaturan default browser
Kode dalam contoh di atas adalah kode standar yang digunakan di bilah navigasi vertikal dan horizontal, yang akan Anda pelajari lebih lanjut di bab berikutnya.