Memiliki navigasi yang mudah digunakan sangat penting untuk situs web manapun.Dengan CSS Anda bisa mengubah menu HTML yang membosankan menjadi bar navigasi yang bagus.
Navigasi Bar = Daftar Tautan
Sebuah bar navigasi membutuhkan standar HTML sebagai basis.Dalam contoh kami, kami akan membuat panel navigasi dari daftar HTML standar.Sebuah bar navigasi pada dasarnya adalah daftar tautan, jadi dengan menggunakan elemen <ul> dan <li> sangat masuk akal:
Contoh:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Sekarang mari kita lepaskan peluru dan margin dan padding dari daftar:
Contoh:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
penjelasan:
list-style-type: none; - Menghapus peluru. Sebuah bar navigasi tidak memerlukan daftar penanda
Setel margin: 0; Dan padding: 0; Untuk menghapus pengaturan default browserKode pada contoh di atas adalah kode standar yang digunakan di kedua palang navigasi vertikal dan horizontal.Bar Navigasi VertikalUntuk membangun bilah navigasi vertikal, Anda bisa menata elemen <a> di dalam daftar, selain kode di atas:Contoh
li a {
display: block;
width: 60px;
}
penjelasan:
display: block; - Menampilkan link sebagai elemen blok membuat keseluruhan area link dapat diklik (bukan hanya teksnya), dan ini memungkinkan kita untuk menentukan lebar (dan padding, margin, height, etc. jika Anda mau)
width: 60px; - Elemen blok mengambil lebar penuh yang tersedia secara default. dengan menentukan lebar 60 piksel
Dapat juga mengatur lebar <ul>, dan hapus lebar <a>, karena akan mengambil lebar penuh yang tersedia saat ditampilkan sebagai elemen blok. Ini akan menghasilkan hasil yang sama seperti contoh sebelumnya:
Contoh
ul {Contoh Navigasi Vertikal Bar
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Buat bilah navigasi vertikal dasar dengan warna latar abu-abu dan ubah warna latar belakang tautan saat pengguna mengarahkan mouse ke atasnya:
Contoh
ul {Tautan Navigasi Aktif / Lancar
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
/* Ubah warna link ketika di sorot */
li a:hover {
background-color: #555;
color: white;
}
Tambahkan kelas "aktif" ke tautan saat ini agar pengguna tahu laman mana dia berada:
Contoh
.active {Tautan Pusat & Tambah Batas
background-color: #4CAF50;
color: white;
}
Tambahkan text-align: center ke <li> atau <a> untuk memusatkan link.Tambahkan properti perbatasan ke <ul> tambahkan batas di sekitar navbar. Jika Anda juga menginginkan batas di dalam navbar, tambahkan elemen dasar-batas ke semua elemen <li>, kecuali yang terakhir:
Contoh
ul {Navbar Vertikal Tetap Tinggi Penuh
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Buat navigasi sisi tinggi "lengket":
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 */
}
Contoh ini mungkin tidak bekerja dengan benar pada perangkat mobile.
Navigasi Horizontal Bar
Ada dua cara untuk membuat bar navigasi horizontal. Menggunakan item daftar inline atau floating.
Item Daftar Inline
Salah satu cara untuk membangun bar navigasi horizontal adalah dengan menentukan elemen <li> sebagai inline, selain kode "standar" di atas:
Contoh
li {
display: inline;
}
penjelasan:
display: inline; - Secara default, elemen <li> adalah elemen blok. Di sini, kita menghapus jeda baris sebelum dan sesudah setiap item daftar, untuk menampilkannya dalam satu baris
Item Daftar Terapung
Cara lain untuk membuat bilah navigasi horizontal adalah mengapung elemen <li>, dan menentukan tata letak untuk tautan navigasi:
Contoh
li {
float: left;
}
a {
float: left;
padding: 8px;
background-color: #dddddd;
}
penjelasan:
float: left; - Gunakan float untuk mendapatkan elemen blok ke slide di samping satu sama lain
float: left; - Menampilkan link sebagai elemen blok membuat keseluruhan area link dapat diklik (bukan hanya teksnya), dan ini memungkinkan kita untuk menentukan padding (dan tinggi, lebar, margin, dll jika Anda mau)
padding: 8px; - Karena elemen blok memenuhi lebar penuh yang tersedia, mereka tidak dapat saling melayang satu sama lain. Karena itu, tentukan beberapa padding agar terlihat bagus
background-color: #dddddd; - Tambahkan warna latar abu-abu ke setiap elemen
Kiat: Tambahkan warna latar belakang ke <ul> alih-alih setiap elemen <a> jika Anda menginginkan warna latar penuh:
Contoh
ul {Contoh Navigasi Horizontal Bar
background-color: #dddddd;
}
Buat bilah navigasi horizontal dasar dengan warna latar belakang gelap dan ubah warna latar belakang tautan saat pengguna mengarahkan mouse ke atasnya:
Contoh
ul {Tautan Navigasi Aktif / Lancar
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Tambahkan kelas "aktif" ke tautan saat ini agar pengguna tahu laman mana dia berada:
Contoh
.active {Tautan Lurus dengan Benar
background-color: #4CAF50;
}
Right-align links dengan mengambang item daftar ke kanan (float: right;):
Contoh
Pembagi Perbatasan<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
Tambahkan properti border-right ke <li> untuk membuat pemisah tautan:
Contoh
/ * Tambahkan batas kanan abu-abu ke semua item daftar, kecuali item terakhir (anak terakhir) * /Bar Navigasi Tetap
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Buat bilah navigasi tetap di bagian atas atau bawah halaman, bahkan saat pengguna menggulir halaman:Tetap atas
ul {Bawah tetap
position: fixed;
top: 0;
width: 100%;
}
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Contoh-contoh ini mungkin tidak bekerja dengan benar pada perangkat mobile.
Grey Horizontal Navbar
Contoh bar navigasi horizontal abu-abu dengan batas abu-abu tipis:
Contoh
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
Out Of Topic Show Konversi KodeHide Konversi Kode