CSS

Navigation Bar Vertikal di CSS: Contoh Sintak dan Cara Membuatnya

Bar Navigasi Vertikal

Untuk membuat bar navigasi vertikal, kita dapat mengatur gaya elemen di dalam daftar, seperti contoh di bawah ini:

Contoh :

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

Penjelasan Kode:

  • display: block; – Menampilkan tautan sebagai elemen blok membuat seluruh area tautan dapat diklik (bukan hanya teks), dan memungkinkan kita untuk menentukan lebar,padding, margin, height, dll.
  • width: 60px; -Elemen blok menggunakan lebar penuh yang tersedia secara default. Kita akan menentukan lebar 60 piksel

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

Contoh :

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

li a {
  display: block;
}

Contoh Bar Navigasi Vertikal

Buat bar navigasi vertikal dasar dengan warna latar abu-abu dan ubah warna latar belakang tautan saat kita menggerakkan mouse ke atasnya:

Contoh :

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

/* Change the link color on hover */li a:hover {
  background-color: #555;
  color: white;
}
<!DOCTYPE html>
<html>
<head>
<style>
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;
}

/* Change the link color on hover */li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

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

Tautan Navigasi Aktif / Saat Ini

Tambahkan kelas “aktif” ke tautan saat ini untuk memberi tahu user di halaman mana dia berada:

Contoh :

.active {
  background-color: #4CAF50;
  color: white;
}

Tautan Pusat & Tambahkan Batas

Tambahkan text-align: center ke <li> atau <a> agar tautan berada di tengah.

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

Contoh :

ul {
  border: 1px solid #555;
}

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

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

Navbar Vertikal Tetap Tinggi Penuh

Buat navigasi samping “sticky” dengan tinggi penuh:

Contoh :

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */  position: fixed; /* Make it stick, even on scroll */  overflow: auto; /* Enable scrolling if the sidenav has too much content */}

Catatan: Contoh ini mungkin tidak berfungsi dengan baik di perangkat seluler


Hanifah Nurbaeti

Share
Tags: CSS