Buat bilah navigasi horizontal CSS murni

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 00:49:43

Bilah navigasi terdiri dari gambar grafik yang ditempatkan dalam deretan sel tabel. Karena penggunaan tabel untuk menemukan konten halaman non-tabel tidak lagi direkomendasikan, banyak orang yang membuat Web mencari cara (baru) untuk menggunakan struktur

Markup XHTML dan pemformatan CSS untuk membuat bilah navigasi.

Bilah navigasi CSS sederhana

Mungkin solusi paling sederhana untuk membuat bilah navigasi teks bergaya CSS adalah dengan menempatkan semua link pada satu baris teks, seperti pada Contoh A.

Pendekatan ini tampaknya masuk akal dan intuitif. Namun masalahnya adalah meletakkan semua tautan dalam satu baris teks menyulitkan untuk mengontrol spasi antara tautan dan sebelum dan sesudahnya. Jadi, untuk menghindari semua tautan Anda berkumpul, sebaiknya Anda melakukannya

Setelah itu biasanya Anda harus memasukkan pipa (batang vertikal) dan karakter spasi non-baris baru sebagai pembatas.

Seperti yang ditunjukkan kode di bawah, hasilnya bukanlah markup terstruktur dan jelas yang kita inginkan.

Berikut isi kutipannya:
<div id="navbar1">
<a href="link1a.html">Tombol 1</a> |
href="link2a.html ">Tombol 2</a> |.<a href="link3a.html ">
Tombol 3</a>
</div>

Jika Anda menambahkan tag <span> untuk menerapkan gaya CSS tambahan yang diperlukan untuk membuat latar belakang tombol dan efek gulir, markupnya akan menjadi lebih membingungkan.

Bilah navigasi CSS berbasis daftar Cara lain untuk membuat bilah navigasi CSS adalah dengan menggunakan tag <ul> dan <li> untuk mewakili tautan sebagai daftar tak berurutan.

Pada pandangan pertama, menggunakan daftar tak berurutan untuk bilah navigasi tampaknya berlawanan dengan intuisi, karena kita terbiasa menganggap daftar tak berurutan sebagai daftar item yang didorong ke atas secara vertikal, dengan Poin di depannya masing-masing. Hal ini tampaknya tidak sesuai dengan orientasi horizontal bilah navigasi.

Namun, struktur logis daftar sebagai kumpulan item daftar independen dapat diterapkan ke tautan di bilah navigasi; dan aturan CSS memungkinkan Anda untuk memaksa mengesampingkan presentasi default item daftar, menghilangkan poin, dan mengatur item daftar di halaman dari pelampung di bawah.

Mengetahui hal ini, sekarang mari kita lihat Contoh B, membuat bilah navigasi bergaya CSS dan berlabel XHTML berdasarkan daftar tidak berurutan.

Berikut ini markup XHTMLnya:

Berikut isi kutipannya:

<div id="navbar2">
<ul>
<li><a href="link1.html">Tombol 1</a></li>
<li><a href="link2.html ">Tombol 2</a></li>
<li><a href="link3.html ">Tombol 3</a></li>
</ul>
</div>

Pembaca reguler kolom ini mungkin mengenali contoh ini sebagai label yang sama yang saya gunakan pada tombol CSS lainnya. Salah satu hal yang menarik dari teknik ini adalah labelnya sama untuk semua tombol, baik yang ditumpuk secara vertikal dalam kolom di samping teks utama, atau ditempatkan secara horizontal pada bilah navigasi di bagian atas halaman.

Berikut adalah kode CSS untuk mengubah daftar tautan teks menjadi bilah navigasi:

Berikut isi kutipannya:

div#navbar2 {
tinggi: 30 piksel;
lebar: 100%;
perbatasan-atas: solid #000 1px;
batas bawah: padat #000 1 piksel;
warna latar belakang: #336699;
}
div#navbar2 ul {
margin: 0 piksel;
bantalan: 0 piksel;
keluarga font: Arial, Helvetica, sans-serif;
ukuran font: kecil;
warna: #FFF;
tinggi garis: 30px;
spasi putih: nowrap;
}
div#navbar2 li {
tipe gaya daftar: tidak ada;
tampilan: sebaris;
}
div#navbar2 li a {
dekorasi teks: tidak ada;
bantalan: 7px 10px;
warna: #FFF;
}
div#navbar2 lia:tautan {
warna: #FFF:
}
div#navbar2 lia:mengunjungi {
warna: #CCC;
}
div#navbar2 lia: arahkan kursor {
berat font: tebal;
warna: #FFF;
warna latar belakang: #3366FF;
}