Navigasi Bar CSS

Memiliki navigasi yang mudah digunakan penting untuk sebuah situs web.

Dengan menggunakan CSS, navigasi bar akan menjadi lebih menarik.

Navigasi Bar = Daftar Link

Navigasi bar membutuhkan HTML standar sebagai basis.

Dalam contoh dibawah ini, akan dibuat navigasi bar dari list HTML standar.

Navigasi bar pada dasarnya adalah daftar link, jadi membuatnya dapat menggunakan elemen <ul> dan <li>.

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, margin dan padding dari list.

Contoh

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Penjelasan Contoh:

• list-style-type: none; digunakan untuk menghapus bullet. Navigasi bar tidak memerlukan bullet atau sebuah penanda.
• margin: 0; dan padding: 0; digunakan untuk menghapus pengaturan default browser

Kode dalam contoh di atas adalah kode standar yang digunakan di navigasi bar vertikal dan horizontal.

Sumber referensi: w3schools