Navigasi Bar Vertikal CSS

Untuk membuat navigasi bar vertikal, kita dapat memberi style pada elemen <a> di dalam list, selain kode dari halaman sebelumnya:

li a {
  display: block;
  width: 60px;
}

Penjelasan contoh:

• display: block; - Menampilkan link sebagai elemen blok untuk membuat seluruh area link dapat diklik (bukan hanya teks), dan memungkinkan kita untuk menentukan lebar, padding, margin, tinggi, dll.
• width: 60px; - Elemen blok mengambil full lebar yang tersedia secara default. Disini ditentukan lebar 60 piksel.

Kita juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena akan mengambil full lebar yang tersedia saat ditampilkan sebagai elemen blok. Ini akan menghasilkan hasil yang sama seperti contoh sebelumnya:

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

li a {
  display: block;
}

Membuat Navigasi Bar Vertikal

Kali ini kita akan membuat navigasi bar vertikal dasar dengan warna background abu-abu dan ubah warna background link saat pengguna menggerakkan mouse ke atasnya:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Mengubah link warna saat mouse diarahkan */
li a:hover {
  background-color: #555;
  color: white;
}

Link Navigasi Aktif

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

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

Center Link & Tambahkan Borders

Tambahkan text-align:center ke <li> atau <a> untuk membuat link berada di tengah.

Tambahkan properti border ke <ul> tambahkan border di sekitar navigasi bar. Jika ingin border di dalam navigasi bar, tambahkan border-bottom ke semua elemen <li>, kecuali yang terakhir:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

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

Full-height Fixed Navbar Vertikal

Buat navigasi samping "sticky" dengan ketinggian full:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Membuatnya tetap menempel, bahkan saat di scroll */
  overflow: auto; /* Menampilkan scrol jika navigasi bar samping terlalu banyak konten */
}

Sumber referensi: w3schools