Panduan selangkah demi selangkah
Apakah menu navigasi Anda adalah baris horizontal di bagian atas atau baris vertikal di sisi bawah, itu masih hanya daftar. Saat mendesain navigasi web, sering kali mudah lupa bahwa menu navigasi hanyalah sekelompok tautan yang dimuliakan. Tetapi jika Anda memprogram navigasi Anda menggunakan XHTML + CSS, Anda dapat membuat menu yang kecil untuk mengunduh (XHTML) dan mudah untuk menyesuaikan (CSS).
Mulai
Untuk mulai merancang daftar untuk navigasi, Anda perlu menggunakan daftar.
Ini mungkin daftar standar tanpa urutan yang telah diidentifikasi sebagai navigasi:
Jika Anda melihat lebih dekat pada HTML, Anda akan melihat bahwa tautan "Beranda" juga memiliki ID Anda di mana pun. Ini akan memungkinkan Anda untuk membuat menu yang mengidentifikasi lokasi saat ini untuk pembaca Anda. Bahkan jika Anda tidak berencana memiliki jenis isyarat visual di situs Anda sekarang, Anda dapat menyertakan informasi itu. Jika Anda memutuskan untuk menambahkan tanda nanti, Anda akan memiliki lebih sedikit coding untuk menyiapkan situs Anda.
Tanpa styling CSS apa pun, menu XHTML ini tampak seperti daftar tanpa urutan standar. Ada peluru dan item daftar sedikit menjorok. Karena saya menggunakan tautan tempat penampung , sebagian besar browser tidak akan menampilkan tautan sebagai dapat diklik (digarisbawahi dan berwarna biru). Jika Anda menempelkan HTML di atas ke dalam halaman Web, navigasi Anda akan terlihat seperti ini:
- Rumah
- Produk
- Jasa
- Hubungi kami
Ini sangat membosankan dan tidak terlihat seperti menu. Tetapi hanya dengan beberapa gaya CSS ditambahkan ke daftar, Anda dapat membuat menu yang membuat Anda bangga.
Menu Navigasi Vertikal
Menu navigasi vertikal sangat mudah ditulis karena ditampilkan dengan cara yang sama seperti daftar normal: atas dan bawah.
Item daftar ditampilkan secara vertikal ke bawah halaman.
Saat saya menata menu, saya suka memulai dari luar dan bekerja. Dengan ini, maksud saya saya pertama-tama gaya navigasi ul # dan kemudian pindah ke elemen li dan kemudian tautan, dll. Jadi untuk menu ini, pertama Anda menentukan lebar menu. Ini akan memastikan bahwa meskipun item menu panjang, mereka tidak akan mendorong sisa tata letak atau menyebabkan horizontal scrolling.
ul # navigasi {width: 12em; }
Setelah saya memiliki set lebar, saya bisa bermain dengan item daftar. Ini memungkinkan saya untuk mengatur hal-hal seperti (untuk menyingkirkan peluru), warna latar belakang, perbatasan, perataan teks, dan margin.
ul # navigasi li {
daftar-gaya: tidak ada;
warna latar: # 039;
border-top: solid 1px # 039;
text-align: kiri;
margin: 0;
}
Setelah Anda menetapkan dasar-dasar untuk daftar item, Anda dapat mulai bermain dengan tampilan menu di area tautan. Gaya pertama UL # navigasi LI A dan kemudian A: link, A: dikunjungi, A: hover, dan A: aktif (jika Anda menginginkannya). Untuk tautan, saya ingin membuat tautan elemen blok (bukan in-line default). Hal ini memaksa mereka untuk mengambil seluruh ruang LI - dan mereka bertindak lebih seperti paragraf, yang membuat mereka lebih mudah untuk bergaya sebagai tombol menu. Hal lain yang selalu saya lakukan adalah menghapus garis bawah (teks-dekorasi: none;), karena ini membuat tombol lebih terlihat seperti tombol untuk saya.
Tetapi tentu saja, desain Anda mungkin berbeda.
ul # navigasi li a {
display: block;
teks-dekorasi: tidak ada;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Perhatikan bahwa dengan tampilan: blok; diatur pada tautan, seluruh kotak item menu dapat diklik, bukan hanya huruf. Ini juga bagus untuk kegunaan. Pastikan untuk mengatur warna tautan (tautan, dikunjungi, arahkan dan aktif) jika Anda ingin warnanya berbeda dari warna biru, merah dan ungu default.
a: tautan, a: dikunjungi {color: #fff; }
a: hover, a: active {color: # 000; }
Saya juga ingin memberikan hover state sedikit lebih perhatian dengan mengubah warna latar belakang.
a: hover {background-color: #fff; }
Jika Anda ingin lebih banyak contoh menu vertikal, lihat daftar di bawah ini.
- Menu Vertikal Bergaya
- Template Menu Vertikal Dasar
- Menu Vertikal Bergaya dengan Anda Ada di Sini
- Template Menu Vertikal Dasar dengan Anda Ada di Sini
Menu Navigasi Horizontal
Membuat menu navigasi horizontal sedikit lebih sulit daripada menu navigasi vertikal karena Anda harus mengimbangi fakta bahwa daftar HTML lebih suka ditampilkan secara vertikal. Seperti menu horizontal, pertama-tama buat daftar menu navigasi Anda:
Untuk membuat menu horizontal, kerjakan sama seperti yang Anda lakukan dengan menu vertikal. Mulai dengan bagian luar dan bekerja. Karena saya ingin navigasi saya mulai di sudut kiri, saya mengaturnya dengan 0 margin kiri dan padding, dan saya mengapungkannya ke kiri. Anda juga harus terbiasa mengatur lebar agar menu tidak mengambil lebih banyak atau lebih sedikit dari yang Anda inginkan. Untuk menu horizontal, ini biasanya lebar penuh dari desain. Saya juga menambahkan warna latar belakang ke seluruh daftar untuk membuatnya lebih mudah dibaca.
ul # navigation {
float: kiri;
margin: 0;
padding: 0;
lebar: 100%;
warna latar: # 039;
}
Tetapi rahasia untuk menu navigasi horizontal ada di daftar item. Item daftar biasanya memblokir elemen, yang berarti bahwa mereka akan memiliki baris baru yang ditempatkan sebelum dan sesudah masing-masing. Dengan mengalihkan tampilan dari blok ke inline, Anda memaksa elemen daftar untuk berbaris di samping satu sama lain secara horizontal.
ul # navigasi li {display: inline; }
Saya memperlakukan tautan persis seperti saya memperlakukan mereka di menu navigasi vertikal, dengan warna dan dekorasi teks yang sama. Saya menambahkan batas atas untuk melukiskan tombol-tombol ketika mereka melayang. Satu-satunya hal yang saya hapus adalah tampilan: blok; karena itu akan menempatkan kembali baris baru dan menghancurkan menu horizontal.
ul # navigasi li a {
teks-dekorasi: tidak ada;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: tautan, a: dikunjungi {color: #fff; }
ul # navigasi li a: hover {
warna latar belakang: #fff;
warna: # 000;
}
Anda Di Sini Informasi Lokasi
Aspek lain dari HTML adalah youarehere identifier. Jika Anda ingin memodifikasi menu Anda untuk menunjukkan lokasi pengguna Anda saat ini, cukup gunakan ID ini untuk menentukan warna latar belakang yang berbeda atau gaya lainnya. Pindahkan atribut ID itu ke item menu yang benar di halaman lain sehingga halaman saat ini selalu disorot.
ul # navigasi li # youarehere {background-color: # 09f; }
Jika Anda menggabungkan gaya ini di halaman Anda, Anda dapat membuat bilah menu horizontal atau vertikal yang bekerja dengan situs Anda tetapi cepat untuk diunduh dan sangat mudah untuk diperbarui di masa mendatang. Menggunakan XHTML + CSS mengubah daftar Anda menjadi alat yang sangat kuat untuk desain.
Jika Anda ingin lebih banyak contoh menu horizontal, bacalah yang berikut ini.
- Menu Horizontal Bergaya
- Template Menu Horisontal Dasar
- Menu Horizontal Gaya dengan Anda Ada di Sini
- Sebuah Template Menu Horisontal Dasar dengan Anda Ada di Sini