Latest web development tutorials

CSS bar navigasi

Contoh: Navigasi Bar

Navigation Bar

Terampil menggunakan navigasi untuk situs web apapun sangat penting.

Dengan CSS Anda dapat mengkonversi menjadi menu bar yang bagus bukan menu HTML membosankan.

Navigasi link list =

Sebagai standar bar navigasi berbasis HTML adalah suatu keharusan

. Dalam contoh kita akan membuat daftar HTML bar navigasi standar.

Navigasi bar pada dasarnya adalah daftar link, jadi gunakan <ul> dan <li> elemen yang sangat berarti:

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>

Coba »

Sekarang, mari kita menghapus margin dan padding dari daftar:

contoh

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

Coba »

Contoh analisis:

  • list-style-type: none - sebelum mengeluarkan daftar bendera kecil. Sebuah bar navigasi tidak perlu daftar penanda
  • Hapus browser pengaturan default margin dan padding set ke 0

Contoh di atas kode dalam kode vertikal dan horizontal bar navigasi standar yang digunakan.

bar navigasi vertikal

Kode di atas, kita hanya perlu elemen gaya <a>, mendirikan sebuah bar navigasi vertikal:

contoh

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

Coba »

Contoh menunjukkan:

  • display: block - display link elemen blok, sehingga keseluruhan menjadi area link diklik (tidak hanya teks), yang memungkinkan kita untuk menentukan lebar
  • width: 60px - Blok elemen secara default adalah lebar maksimum. Kami ingin menentukan lebar 60 piksel

Tip: Lihat contoh sebuah bar navigasi vertikal penuh gaya .

Catatan: Pastikan untuk menentukan lebar dari elemen di vertikal bar navigasi <a> 's.Jika Anda menghilangkan lebar, IE6 dapat menghasilkan hasil yang tidak diharapkan.

bar navigasi horisontal

Ada dua cara untuk membuat sebuah bar navigasi horizontal. Gunakaninline atau mengambangdaftar item.

Kedua metode baik-baik saja, tetapi jika Anda ingin menghubungkan dengan ukuran yang sama, Anda harus menggunakan metode apung.

daftar item inline

Satu untuk membangun sebuah bar navigasi horizontal adalah untuk menentukan

  • Elemen, kode di atas adalah standar built-in:

    contoh

    li
    {
    display:inline;
    }

    Coba »

    contoh analisis:

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

    Tip: Lihat contoh sebuah bar navigasi horisontal penuh gaya .

    Mengambang daftar item

    Dalam contoh di atas link memiliki lebar yang berbeda.

    Untuk semua link lebar sama, mengapung <li> elemen dan menentukan lebar <a> elemen:

    contoh

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

    Coba »

    contoh analisis:

    • float: left - menggunakan slide slider elemen bersebelahan
    • display: block - display link elemen blok, sehingga keseluruhan menjadi area link diklik (tidak hanya teks), yang memungkinkan kita untuk menentukan lebar
    • width: 60px - Blok elemen secara default adalah lebar maksimum. Kami ingin menentukan lebar 60 piksel

    Tip: Lihat contoh sebuah bar navigasi horisontal penuh gaya. .