Bilah Navigasi Vertikal CSS
Bilah Navigasi Vertikal
Untuk membuat bilah navigasi vertikal, Anda dapat mengatur gaya elemen <a> di dalam daftar, selain kode dari halaman sebelumnya:
Contoh
li a
{
display: block;
width: 60px;
}
Contoh menjelaskan:
display: block;- Menampilkan tautan sebagai elemen blok membuat seluruh area tautan dapat diklik (bukan hanya teks), dan memungkinkan kita untuk menentukan lebar (dan bantalan, margin, tinggi, dll. jika Anda mau)width: 60px;- Elemen blok mengambil lebar penuh yang tersedia secara default. Kami ingin menentukan lebar 60 piksel
Anda juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena akan mengambil lebar penuh yang tersedia saat ditampilkan sebagai elemen blok. Ini akan menghasilkan hasil yang sama seperti contoh kita sebelumnya:
Contoh
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Contoh Bilah Navigasi Vertikal
Buat bilah navigasi vertikal dasar dengan warna latar belakang abu-abu dan ubah warna latar belakang tautan saat pengguna 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;
}
Tautan Navigasi Aktif/Saat Ini
Tambahkan kelas "aktif" ke tautan saat ini untuk memberi tahu pengguna di halaman mana dia berada:
Contoh
.active {
background-color: #04AA6D;
color: white;
}
Tautan Tengah & Tambahkan Batas
Tambahkan text-align:centerke <li> atau <a> untuk memusatkan tautan.
Tambahkan borderproperti ke <ul> menambahkan perbatasan di sekitar navbar. Jika Anda juga ingin batas di dalam bilah navigasi, tambahkan a border-bottomke semua elemen <li>, 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 "lengket" dengan ketinggian 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.