Navigation Bar di CSS: Navbar CSS – Sintak dan cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti September 26, 2020

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 :

<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 serta padding dari daftar:

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

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.

CSS