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