Bar Navigasi
Memiliki navigasi yang mudah digunakan penting untuk situs web mana pun.
Dengan CSS kita bisa mengubah menu HTML yang membosankan menjadi navigasi yang menarik.
Bar Navigasi = Daftar Tautan
Bar Navigasi memiliki standar berbasis HTML.
Dalam contoh kita akan membangun bar navigasi dari daftar HTML standar.
Bar navigasi pada dasarnya adalah daftar tautan, jadi bisa menggunakan elemen <ul> dan <li>
Contoh :
CSS
xxxxxxxxxx1
<ul>2
<li><a href="default.asp">Home</a></li>3
<li><a href="news.asp">News</a></li>4
<li><a href="contact.asp">Contact</a></li>5
<li><a href="about.asp">About</a></li>6
</ul>Sekarang mari kita hapus bullet dan margin serta padding dari daftar:
CSS
xxxxxxxxxx1
ul {2
list-style-type: none;3
margin: 0;4
padding: 0;5
}HTML
xxxxxxxxxx25
1
2
<html>3
<head>4
<style>5
ul {6
list-style-type: none;7
margin: 0;8
padding: 0;9
}10
</style>11
</head>12
<body>13
14
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>15
16
<ul>17
<li><a href="#home">Home</a></li>18
<li><a href="#news">News</a></li>19
<li><a href="#contact">Contact</a></li>20
<li><a href="#about">About</a></li>21
</ul>22
23
</body>24
</html>25
Penjelasan Kode:
- list-style-type: none; – Menghapus bullet. Bar navigasi tidak membutuhkan penanda daftar
- Setel margin: 0; dan padding: 0; untuk menghapus pengaturan default browser
Kode pada contoh di atas adalah kode standar yang digunakan di bar navigasi vertikal dan horizontal, yang akan kita pelajari lebih lanjut di materi selanjutnya.
