Floating List Items
Cara lain untuk membuat bilah navigasi horizontal adalah dengan mengapung elemen <li>, dan menentukan tata letak untuk tautan navigasi:
Contoh menjelaskan:
float: left;= - gunakan float agar elemen blok bergeser bersebelahan
display: block;=- Menampilkan tautan sebagai elemen blok membuat seluruh area tautan dapat diklik (bukan hanya teks), dan ini memungkinkan kami untuk menentukan bantalan (dan tinggi, lebar, margin, dll. Jika Anda mau)
padding: 8px;=- Karena elemen blok mengambil lebar penuh yang tersedia, mereka tidak dapat mengapung bersebelahan. Oleh karena itu, tentukan beberapa padding agar terlihat bagus
background-color: #ffffcc;= - Tambahkan warna latar belakang abu-abu untuk setiap elemen
Contoh Bilah Navigasi Horizontal
Buat bilah navigasi horizontal dasar dengan warna latar belakang gelap dan ubah warna latar belakang tautan saat pengguna menggerakkan mouse ke atasnya:
Tips: Tambahkan warna latar belakang ke <ul> alih-alih setiap elemen <a> jika Anda menginginkan warna latar belakang lebar penuh atau FULL:
ul {
background-color: #000000;
}
Tambahahkan li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
Tips: Ubah warna tautan menjadi #ff0000 (MERAH) saat mengarahkan kursor saat di pindahkan
li a:hover {
background-color: #ff0000;
}
Tautan Navigasi Aktif / Saat Ini
Tambahkan kelas "aktif" ke tautan saat ini untuk memberi tahu pengguna di halaman mana dia berada:
0 Comments