CSS Navigation Bar

by

Apa itu navigation bar?

Biasa juga disebut dengan menu utama atau navigasi utama. Navigasi itu kalau bagi pelaut artinya petunjuk.

Jadi, fungsi utama dari menu navigasi adalah petunjuk berupa teks link supaya pengunjung dapat menuju halaman-halaman lain yang direkomendasikan.

Contoh horizontal navigation bar:

Contoh verical navigation bar:

Supaya lebih jelas:

Contoh nav bar di web ini (April 2020)

Jadi, navigasi bar itu ada dua yaitu:

Navigation Bar

Pada umumnya untuk membuat nav bar kita membutuhkan element list html.

Yang digunakan adalah unordered list <ul> bukan ordered list <ol>.

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#kontak">Contact</a></li>
  <li><a href="#disclaimer">Disclaimer</a></li>
</ul>

Kemudian, untuk membuatnya menjadi vertical nav bar, kita membutuhkan css:

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

Keterangan:

  • Hapus dulu style list <li> dengan kode list-style-type diisi none
  • Margin dan padding diset 0

Vertical bar navigasi

Kode paling dasar untuk membuat navigasi vertikal adalah yang diatas. Tapi, tampilannya masih sangat sederhana saja. Hanya seperti ini:

Nanti akan kita buat menjadi seperti ini:

Keren kan? Berikut kode CSSnya beserta penjelasan:

ul {
  list-style-type: none; /* stylenya dihapus */
  margin: 0;
  padding: 0;
  width: 200px;  /* diatur panjangnya 200px */
  background-color: #f1f1f1;  /* diatur background warna */
}

li a {  /* ini memilih link a di dalam li */
  display: block;  /* tampilannya dibuat block */
  color: #000;  /*atur warna */
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {  /* mengatur tampilan link yang aktif */
  background-color: #5340ff;
  color: white;
}

li a:hover:not(.active) {  /* mengatur hover link yang bukan aktif*/
  background-color: #212121;
  color: white;
}

Penjelasan kode ada di komentarnya ya.

Horizontal bar navigasi

Menunya masih sama, tapi tampilannya menjadi:

Kodenya adalah:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden; /* untuk menyembunyikan konten yang melebihi box*/
  background-color: #333;
}
li {
  float:left; /* terpenting biar horizontal */
}
li a {
  display: block;
  color:white;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #5340ff;
  color: white;
}

li a:hover:not(.active) {
  background-color: #212121;
  color: white;
}

Secara garis besar kodenya sama dengan yang vertikal. Letak pembeda utama adalah penambahan kode li {float:left} supaya posisi <li> horizontal kiri.

Leave a Comment