Pahami dan Buat Navbar dengan CSS

navigasi Bar.

Memiliki mudah menggunakan navigasi adalah penting untuk setiap situs web.
Dengan CSS Anda dapat mengubah menu HTML membosankan menjadi tampan bar navigasi.

Navigation Bar = Daftar Link.

Sebuah bar navigasi yang standar HTML sebagai dasar.
Dalam contoh kita, kita akan membangun panel navigasi dari daftar HTML standar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan elemen <li> masuk akal:

<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 menghapus peluru dan margin dan padding dari daftar:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Contoh menjelaskan:

-daftar-style-type : none – Menghapus peluru. Sebuah bar navigasi tidak perlu daftar penanda.
-Mengatur margin dan padding ke 0 untuk menghapus pengaturan browser default.

Kode dalam contoh di atas adalah kode standar yang digunakan di kedua bar navigasi vertikal, dan horisontal.

Navigation Bar Vertikal.

Untuk membangun sebuah bar navigasi vertikal kita hanya perlu gaya elemen <a>, selain kode di atas:

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

Contoh menjelaskan:
-display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
-Lebar: 60px – elemen Blok mengambil lebar penuh yang tersedia secara default. Kami ingin menentukan lebar 60 px.

Tip : Juga lihatlah penuh fully styled vertical navigation bar example.

Catatan : Selalu tentukan lebar untuk elemen <a> di sebuah bar navigasi vertikal. Jika Anda menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.

Horizontal Navigasi Bar.

Ada dua cara untuk membuat sebuah bar navigasi horisontal. Menggunakan daftar item inline atau mengambang.
Kedua metode bekerja dengan baik, tetapi jika Anda ingin link ke menjadi ukuran yang sama, Anda harus menggunakan metode mengambang.

Inline Daftar Produk.

Salah satu cara untuk membangun sebuah bar navigasi horizontal untuk menentukan unsur-unsur <li> sebagai inline, di samping kode “standar” di atas:

li
{
display:inline;
}

contoh menjelaskan:

*display: inline; – Secara default, elemen <li> merupakan unsur blok. Di sini, kita menghapus jeda baris sebelum dan setelah setiap item daftar, untuk menampilkan mereka pada satu baris.

Mengambang Daftar Produk.

Pada contoh di atas link memiliki lebar yang berbeda.
Untuk semua link untuk memiliki lebar yang sama, mengambang elemen <li> dan menentukan lebar untuk elemen <a>:

li
{
float:left;
}
a
{
display:block;
width:60px;
}

Contoh menjelaskan:

-float: left – menggunakan pelampung untuk mendapatkan unsur-unsur blok ke slide berikutnya satu sama lain.
-display: block – Menampilkan link sebagai elemen blok membuat daerah seluruh link diklik (tidak hanya teks), dan memungkinkan kita untuk menentukan lebar.
-Lebar: 60px – Karena unsur-unsur blok mengambil lebar penuh yang tersedia, mereka tidak dapat mengapung di samping satu sama lain. Kita tentukan lebar dari link untuk 60px.

Sekiaan semoga bermanfaat..

Related Items Pemrograman