Navigation Bar

CSS Navigation Bar
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Demo: Navigation Bar

     rumah
     berita
     artikel
     forum
     kontak
     tentang


Bar navigasi

Memiliki mudah digunakan 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 memerlukan 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 masuk akal:
contoh
<ul>
   <li> <a href="default.asp"> Rumah </a> </ li>
   <li> <a href="news.asp"> Berita </a> </ li>
   <li> <a href="contact.asp"> Kontak </a> </ li>
   <li> <a href="about.asp"> Tentang </a> </ li>
</ ul>

Cobalah sendiri »

Sekarang mari kita menghapus peluru dan margin dan padding dari daftar:
contoh
ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}

Cobalah sendiri »

Contoh menjelaskan:

     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 sebuah bar navigasi vertikal kita hanya perlu untuk gaya elemen <a>, selain kode di atas:
contoh
a {
     display: block;
     width: 60px;
}

Cobalah sendiri »

Contoh menjelaskan:

     display: block - Menampilkan link sebagai elemen blok membuat daerah link diklik keseluruhan (tidak 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

Tip: Juga lihatlah sepenuhnya gaya navigasi vertikal bar contoh kita.
Catatan Catatan: Selalu menentukan lebar untuk elemen <a> di sebuah 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 mengambang daftar item.

Kedua metode bekerja dengan baik, tetapi jika Anda ingin link menjadi ukuran yang sama, Anda harus menggunakan metode apung.
Daftar inline Produk

Salah satu cara untuk membangun sebuah bar navigasi horizontal adalah untuk menentukan <li> elemen sebagai inline, di samping "standar" kode di atas:
contoh
li {
     display: inline;
}

Cobalah sendiri »

Contoh menjelaskan:

     display: inline; - Secara default, <li> elemen adalah elemen blok. Di sini, kita menghapus baris istirahat sebelum dan sesudah setiap item daftar, untuk menampilkan mereka pada satu baris

Mengambang Daftar Produk

Dalam contoh di atas link memiliki lebar yang berbeda.

Untuk semua link memiliki lebar yang sama, mengapung <li> elemen dan menentukan lebar untuk unsur-unsur <a>:
contoh
li {
     float: kiri;
}

a {
     display: block;
     width: 60px;
}

Cobalah sendiri »