Bagaimana Cara Buat Kod Menu Bar Navigasi CSS

Navigation Bar
Menggunakan bar navigasi adalah penting bagi mana-mana laman web.
Dengan CSS anda boleh mengubah menu HTML.

Navigation Bar = Senarai Pautan
A bar navigasi memerlukan HTML standard sebagai asas.

Sila lihat contoh menu bar blog saya, menggunakan CSS membina bar navigasi dari senarai HTML standard.

A bar navigasi pada dasarnya ialah senarai pautan, jadi menggunakan <ul> dan unsur-unsur <li>lihat contoh dibawah:

<ul>

<li> href="#"> Home </ a> </ li>

<li> href="#"> SEO </ a> </ li>

<li> href="#"> Blog Tips</ a> </ li>

<li> href="#"> Video Tutorial </ a> </ li>

<li> href="#"> sitemap</ a> </ li>

</ Ul>

Sekarang mari kita lihat margin dan padding daripada senarai:

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



Contoh jelas:
senarai-gaya-jenis:  - A bar navigasi tidak memerlukan penanda senarai
Menetapkan margin dan padding kepada 0 untuk membuang tetapan lalai pelayar
Kod dalam contoh di atas adalah kod piawai yang digunakan dalam kedua-dua bar navigasi menegak, dan melintang.

Navigation Bar Menegak
Untuk membina sebuah bar navigasi menegak kita hanya perlu gaya unsur-unsur <a>, sebagai tambahan kepada kod di atas:



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


Contoh selanjutnya:
paparan: blok - Memaparkan pautan sebagai elemen-elemen blok membuat kawasan pautan diklik keseluruhan (bukan hanya teks), dan ia membolehkan kita untuk menentukan lebar
width: 60px - elemen Blok mengambil lebar penuh disediakan. Menentukan px lebar 60
Tip: Juga lihat navigasi menegak contoh bar bergaya.

Nota: Sentiasa menentukan lebar untuk unsur-unsur <a> di bar navigasi menegak. Jika anda meninggalkan lebar, IE6 boleh menghasilkan keputusan yang tidak dijangka.

Navigation Bar Mendatar

Terdapat dua cara untuk membuat bar navigasi mendatar. Menggunakan navigasi sebaris atau senarai item terapung.

Kedua-dua kaedah sangat mudah, tetapi jika anda mahu keduanya menjadi saiz yang sama, anda perlu menggunakan kaedah yang terapung.

Senarai Item sebaris
Salah satu cara untuk membina sebuah bar navigasi mendatar adalah untuk menentukan elemen-elemen <li> sebagai sebaris, sebagai tambahan kepada kod "standard" di atas:



li
{
display:inline;
}


paparan: sebaris; -  unsur-unsur item item <li> blok. Di sini, sebelum dan selepas setiap item senarai, untuk memaparkan ianya dalam satu baris
Tip: Juga lihat navigasi mendatar


Senarai Item Terapung
Dalam contoh di atas pautan yang mempunyai lebar yang berbeza.

Untuk semua link mempunyai lebar yang sama, terapung elemen <li> dan menentukan lebar untuk unsur-unsur <a>:


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