Bar Navigasi
Navigasi adalah penting untuk setiap situs web.
Dengan CSS Anda dapat mengubah menu HTML membosankan menjadi bar navigasi tampan.
Navigasi Bar = Daftar Link
Sebuah bar navigasi perlu HTML standar sebagai basis.
Dalam contoh kita, kita akan membangun panel navigasi dari daftar HTML standar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan <li> elemen:
ul>
<li><a href="#">Home</a></li>
<li><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
</ul>
Sekarang mari kita menghapus peluru dan margin dan padding dari daftar:
ul {
list-style-type: none;
padding: 0;
margi: 0;
}
Penjelasan:
- list-style-type: none - Menghapus peluru. Sebuah bar navigasi tidak perlu daftar penanda
- Pengaturan margin dan padding ke 0 untuk menghapus pengaturan browser default
Kode dalam contoh di atas adalah kode standar yang digunakan di kedua vertikal, dan horisontal bar navigasi.
Vertical Navigation Bar
Untuk membangun navigasi bar vertikal kita hanya perlu untuk gaya elemen <a>:
a {
display: block;
width: 60px;
}
Contoh menjelaskan:
- display: block - Menampilkan link sebagai elemen blok membuat daerah link diklik seluruh (bukan hanya teks), dan memungkinkan kita untuk menentukan lebar
- width: 60px - elemen Blok mengambil lebar penuh yang tersedia secara default. Kami ingin menentukan lebar 60 px
Catatan: Selalu menentukan lebar untuk elemen <a> di bar navigasi vertikal. Jika Anda menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.
Horizontal Navigation Bar
Ada dua cara untuk membuat sebuah bar navigasi horisontal. Menggunakan inline atau float daftar item.
Kedua metode bekerja dengan baik, tetapi jika Anda ingin link menjadi ukuran yang sama, Anda harus menggunakan metode float.
Inline
Salah satu cara untuk membangun sebuah bar navigasi horizontal untuk menentukan <li> elemen sebagai inline.
li {
display: inline;
}
Contoh menjelaskan:
- display: inline; - Secara default, <li> elemen adalah elemen blok. Di sini, kita akan menampilkannya ke horisontal.
Float
Dalam contoh di atas link memiliki lebar yang berbeda.
Untuk semua link memiliki lebar yang sama, float <li> elemen dan menentukan lebar untuk elemen <a>:
a {
display: block;
width: 60px;
}
li {
float: left;
}
Contoh penjelasan:
- float: left - untuk mendapatkan unsur-unsur blok meluncur di samping satu sama lain
- display: block - Menampilkan link sebagai elemen blok membuat daerah link diklik seluruh (bukan hanya teks), dan memungkinkan kita untuk menentukan lebar
- width: 60px - Sejak elemen blok mengambil lebar penuh yang tersedia, mereka tidak bisa mengapung di samping satu sama lain. Kita tentukan lebar link ke 60px
0 komentar:
Posting Komentar