Navbar CSS

Navbar HTML dan CSS

NAVBAR

Memiliki navbar yang mudah digunakan penting untuk situs web mana pun.

Dengan CSS Anda dapat mengubah menu HTML yang membosankan menjadi navbar yang menarik.

NAVBAR = DAFTAR LINK

Navbar memerlukan HTML standar sebagai dasar.

Dalam contoh kita, kita akan membuat navbar dari daftar HTML standar.

Navbar pada dasarnya adalah daftar tautan, jadi kita akan gunakan elemen unlisted <ul> dan list item <li>

CONTOH

<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#about">About</a></li>

  <li><a href="#contact">Contact</a></li>

</ul>

Setelah itu kita bisa menambahkan CSS kedalamnya. 

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

Penjelasan : 

- list-style-type: none; - Menghapus poin-poin, Bilah navigasi tidak memerlukan penanda daftar.

- margin: 0; dan padding: 0; menghapus jarak/pembatas default browser

Selanjutnya tambahkan styling lanjutan

body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

Penjelasan : 

float: left; - Gunakan float untuk membuat elemen blok mengapung berdampingan satu sama lain

display: block; - Memungkinkan kita menentukan padding (dan tinggi, lebar, margin, dll. jika Anda mau)

padding: 8px; - Tentukan beberapa padding antara setiap elemen <a>, untuk membuatnya terlihat bagus

Kurang Lebih beginilah hasil dari navbarnya.

lebih lengkap di : W3schools