Panduan langkah demi langkah
Sama ada menu navigasi anda adalah rentetan melintang di bahagian atas atau baris berturut-turut di sebelah, ia masih hanya senarai. Apabila mereka bentuk navigasi web, sering kali mudah dilupakan bahawa menu navigasi hanyalah sekumpulan pautan yang dipuji. Tetapi jika anda memprogram navigasi anda menggunakan XHTML + CSS, anda boleh membuat menu yang kecil untuk memuat turun (XHTML) dan mudah untuk menyesuaikan (CSS).
Bermula
Untuk memulakan merancang senarai untuk navigasi, anda perlu menggunakan senarai.
Ia mungkin senarai tidak teratur piawai yang telah dikenal pasti sebagai navigasi:
Jika anda melihat dengan teliti pada HTML, anda akan melihat bahawa pautan "Rumah" juga mempunyai ID anda. Ini akan membolehkan anda membuat menu yang mengenal pasti lokasi semasa untuk pembaca anda. Walaupun anda tidak merancang untuk mempunyai jenis kiasan visual di laman web anda sekarang, anda boleh memasukkan maklumat itu. Sekiranya anda memutuskan untuk menambah isyarat kemudian, anda akan mempunyai pengekodan yang kurang untuk menyediakan tapak anda.
Tanpa sebarang gaya CSS , menu XHTML ini kelihatan seperti senarai tidak teratur yang standard. Terdapat peluru dan item senarai sedikit diandaikan. Kerana saya menggunakan pautan pemegang tempat , kebanyakan penyemak imbas tidak akan memaparkan pautan sebagai diklik (bergaris bawah dan berwarna biru). Sekiranya anda menyisipkan HTML di atas ke dalam halaman Web, navigasi anda akan kelihatan seperti ini:
- Rumah
- Produk
- Perkhidmatan
- Hubungi Kami
Ini agak membosankan dan tidak kelihatan seperti menu. Tetapi dengan hanya beberapa gaya CSS yang ditambahkan ke dalam senarai, anda boleh membuat menu yang membuat anda bangga.
Menu Navigasi Menegak
Menu navigasi menegak sangat mudah untuk ditulis kerana ia memaparkan dengan cara yang sama seperti senarai biasa: naik dan turun.
Item senarai memaparkan secara menegak ke bawah halaman.
Apabila saya menanam menu, saya suka memulakan di luar dan bekerja. Dengan ini, saya maksudkan bahawa saya pertama kali menyusun navigasi # ul dan kemudian berpindah ke elemen li dan kemudian pautan, dll. Jadi untuk menu ini, pertama anda menentukan lebar menu. Ini akan memastikan bahawa walaupun item menu adalah panjang, mereka tidak akan menolak sisa susun atur atau menyebabkan menatal mendatar.
ul # navigasi {width: 12em; }
Sebaik sahaja saya mempunyai set lebar, saya boleh bermain dengan item senarai. Ini membolehkan saya menetapkan perkara seperti (untuk menghilangkan peluru), warna latar belakang, sempadan, penjajaran teks, dan margin.
ul # navigasi li {
senarai gaya: tiada;
warna latar belakang: # 039;
border-top: pepejal 1px # 039;
teks-align: left;
margin: 0;
}
Sebaik sahaja anda menetapkan asas bagi item senarai, anda boleh mula bermain dengan cara menu kelihatan di kawasan pautan. Gaya pertama navigasi UL # LI A dan kemudian A: link, A: dikunjungi, A: hover, dan A: aktif (jika anda menginginkannya). Untuk pautan, saya suka membuat pautan sebagai elemen blok (bukannya dalam talian lalai). Ini memaksa mereka untuk mengambil seluruh ruang LI -dan mereka bertindak lebih seperti perenggan, yang menjadikan mereka lebih mudah untuk gaya sebagai butang menu. Perkara lain yang saya selalu lakukan ialah mengeluarkan garis bawah (teks-hiasan: tiada;), kerana ini menjadikan butang kelihatan seperti butang kepada saya.
Tetapi tentu saja, reka bentuk anda mungkin berbeza.
ul # navigasi li a {
paparan: blok;
teks-hiasan: tiada;
padding: .25em;
sempadan bawah: pepejal 1px # 39f;
sempadan kanan: pepejal 1px # 39f;
}
Perhatikan bahawa dengan paparan: blok; tetapkan pada pautan, seluruh kotak item menu boleh diklik, bukan hanya huruf. Ini juga baik untuk kebolehgunaan. Pastikan untuk menetapkan warna pautan (pautan, lawatan, hover dan aktif) jika anda mahu mereka berbeza daripada biru, merah dan ungu yang asal.
a: link, a: visited {color: #fff; }
a: hover, a: active {color: # 000; }
Saya juga ingin memberi perhatian lebih sedikit dengan menukar warna latar belakang.
a: hover {background-color: #fff; }
Jika anda ingin lebih banyak contoh menu menegak, rujuk senarai di bawah.
- Menu Menegak Bergaya
- Template Menu Asas Menegak
- Menu Menegak Bergaya dengan Anda Di Sini
- Templat Menu Menegak Asas dengan Anda Di Sini
Menu Navigasi Mendatar
Mewujudkan menu navigasi mendatar sedikit lebih sukar daripada menu navigasi menegak kerana anda harus mengimbangi hakikat bahawa senarai HTML lebih suka dipaparkan secara menegak. Seperti menu mendatar, mula-mula buat senarai menu navigasi anda:
Untuk membuat menu mendatar, bekerjasama sama seperti yang anda lakukan dengan menu menegak. Mulakan dengan bahagian luar dan bekerja. Oleh kerana saya mahu navigasi saya bermula di sudut kiri, saya tetapkannya dengan margin kiri dan padding 0, dan saya terapung ke kiri. Anda juga perlu mengikut tabiat penetapan lebar supaya menu anda tidak mengambil ruang lebih atau kurang daripada yang anda inginkan. Untuk menu mendatar, ini biasanya lebar lebar reka bentuk. Saya juga menambah warna latar belakang ke seluruh senarai untuk memudahkan membaca.
ul # navigasi {
terapung: kiri;
margin: 0;
padding: 0;
lebar: 100%;
warna latar belakang: # 039;
}
Tetapi rahsia ke menu navigasi melintang berada dalam item senarai. Item senarai adalah biasanya unsur-unsur blok, yang bermaksud bahawa mereka akan mempunyai garis baru diletakkan sebelum dan selepas setiap satu. Dengan menukar paparan dari blok kepada inline, anda memaksa elemen senarai untuk bersebelahan dengan satu sama lain secara mendatar.
ul # navigasi li {display: inline; }
Saya merawat pautan sama seperti saya merawatnya dalam menu navigasi menegak, dengan warna dan hiasan teks yang sama. Saya menambah sempadan atas untuk menggambarkan butang apabila mereka melayang. Satu-satunya perkara yang saya keluarkan ialah paparan: blok; kerana itu akan meletakkan baris baru kembali dan memusnahkan menu mendatar.
ul # navigasi li a {
teks-hiasan: tiada;
padding: .25em 1em;
sempadan bawah: pepejal 1px # 39f;
border-top: pepejal 1px # 39f;
sempadan kanan: pepejal 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # navigasi li a: hover {
warna latar belakang: #fff;
warna: # 000;
}
Anda Di Sini Maklumat Lokasi
Satu lagi aspek HTML ialah identifier youarehere. Jika anda ingin mengubah suai menu anda untuk menunjukkan lokasi semasa pengguna anda, cukup gunakan ID ini untuk menentukan warna latar belakang yang berbeza atau gaya lain. Pindahkan atribut ID itu ke item menu yang betul pada halaman lain supaya halaman semasa sentiasa diserlahkan.
ul # navigasi li # youarehere a {background-color: # 09f; }
Jika anda meletakkan gaya ini bersama-sama di halaman anda, anda boleh membuat bar menu mendatar atau menegak yang berfungsi dengan laman web anda tetapi cepat untuk memuat turun dan sangat mudah dikemas kini pada masa hadapan. Menggunakan XHTML + CSS menjadikan senarai anda menjadi alat yang sangat kuat untuk reka bentuk.
Jika anda ingin lebih banyak contoh menu mendatar, rujuk perkara berikut.
- Menu Berasaskan Bergaya
- Template Menu Asas Mendatar
- Menu Berasaskan Bergaya dengan Anda Di Sini
- Template Menu Asas Mendatar dengan Anda Di Sini