Navigasi Bar Horizontal CSS

Ada dua cara untuk membuat navigasi bar horizontal. Yang pertama menggunakan daftar item inline atau floating.

Daftar Item Inline

Salah satu cara untuk membuat navigasi bar horizontal adalah dengan menetapkan elemen <li> sebagai inline.

Contoh

li {
  display: inline;
}

Penjelasan contoh:

• display: inline; - Secara default, elemen <li> adalah elemen blok. Di sini, kita menghapus baris baru sebelum dan sesudah setiap daftar item, untuk menampilkannya dalam satu baris.

Daftar Item Floating

Cara lain untuk membuat navigasi bar horizontal adalah dengan mengapungkan elemen <li>, dan menentukan tata letak untuk link navigasi.

Contoh

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Penjelasan contoh:

• float: left; - Gunakan float untuk membuat elemen blok mengapung di samping satu sama lain
• display: block; - Memungkinkan kita untuk menentukan padding (dan tinggi, lebar, margin, dll jika mau)
• padding: 8px; - Menentukan beberapa padding di antara setiap elemen <a>, agar terlihat lebih bagus
• background-color: #dddddd; - Menambahkan warna background abu-abu ke setiap elemen <a>

Tips: Tambahkan warna background ke <ul> daripada harus menambahkan ke setiap elemen <a> jika Anda menginginkan warna background secara penuh.

Contoh

ul {
  background-color: #dddddd;
}

Membuat Navigasi Bar Horizontal

Contoh membuat navigasi bar horizontal dasar dengan warna background gelap dan ubah warna link background saat pengguna menggerakkan mouse ke atasnya.

Contoh

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;
}

/* Ubah warna link ke #111 (hitam) saat mouse diarahkan */
li a:hover {
  background-color: #111;
}

Link Navigasi Aktif/Saat Ini

Tambahkan class "active" ke link saat ini untuk memberi tahu pengguna di halaman mana dia berada.

Contoh

.active {
  background-color: #04AA6D;
}

Link Rata Kanan

Ratakan kanan salah satu link dengan floating item (float:right;).

Contoh

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Pembagi Border

Tambahkan properti border-right ke <li> untuk membagi link.

Contoh

/* Tambahkan warna abu-abu di kanan border untuk semua daftar item, kecuali daftar yang terakhir (last-child) */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Navigasi Bar Tetap

Membuat navigasi bar tetap berada di bagian atas atau bawah halaman, bahkan saat pengguna scrolling halaman.

Navigasi bar tetap berada diatas:

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Navigasi bar tetap berada dibawah:

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Catatan: Posisi tetap (fixed) mungkin tidak berfungsi dengan baik di perangkat seluler.

Navigas bar Horizontal Abu-abu

Membuat navigasi bar horizontal dengan warna abu-abu yang tipis.

Contoh

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

Navigasi bar Sticky

Tambahkan position: sticky; ke <ul> untuk membuat navigasi bar menjadi lengket/melekat.

Elemen sticky dapat beralih antara relatif dan tetap, tergantung pada posisi scrolling. Sticky akan diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).

Contoh

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Catatan: Internet Explorer tidak mendukung posisi sticky, sedangkan Safari memerlukan tambahan -webkit- (lihat contoh di atas). Anda juga harus menentukan setidaknya salah satu dari top, right, bottom atau left agar penempatan tetap berfungsi.

Sumber referensi: w3schools