Navigasi yang semantik (css-based) dibuat menggunakan list-item:
<ul id="top-navigation"> <li>About Us</li> <li>Advertise</li> <li>Contact Us</li> <li>Guest Blogging</li> <ul>
Tampilan yang akan dihasilkan oleh markup diatas:
(area yang berwara putih saja)
Sekarang saatnya men-styling navigasi menggunakan CSS. Tambahkan perintah CSS ini untuk men-styling markup diatas:
1. Hapus padding, margin dan list-style
Hapus semua styling (padding, margin dan list-style) yang dimiliki oleh unordered list yang dijadikan navigation, lalu beri float agar elemen menjadi “solid”, background agar terlihat kontrasnya (untuk keperluan tutorial saja) dan atur lebarnya.
#top-navigation{
list-style:none;
padding:0;
margin:0;
background:#373737; /* Diberi background agar kontrasnya terlihat */
float:left;
width:940px;
}
2. Display list item secara horizontal
Berikan nilai display:inline kepada list item yang digunakan sebagai elemen navigasi. Penjelasan lebih detail mengenai display bisa baca artikel ini.
#top-navigation li {
display:inline;
}
3. Atur anchor text sebagai elemen navigasi
Alih-alih mengatur li sebagai elemen navigasi, lebih baik ‘padatkan’ list item, lalu atur anchor text sebagai area navigasi sehingga area li dan ul akan mengikuti height dari anchor text.
Float anchor text agar elemen anchor text menjadi exact saat di-padding. Beri background lalu beri border (jika perlu) agar area elemen navigasi terlihat jelas.
4. Berikan perbedaan saat di hover
Mempertimbangkan faktor usability, berikan perbedaan tampilan untuk anchor text saat anchor text navigasi di hover menggunakan pseudo-class :hover.
#top-navigation li a:hover{
background:#ababab;
}
5. Atasi element collapsing yang disebabkan float
Perhatikan bahwa ketika child element suatu elemen di-float sementara parent-nya tidak, parent element tersebut akan “collapse” atau “hilang”. Ada beberapa cara mengatasi great collapsing ini, namu ncara paling simple dan semantic yang saya ketahui sejauh ini adalah dengan menggunakan pseudo-class :after. Artikel keren mengenai floating element.
#top-navigation:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
6. Lihat demo
Sekarang lihat hasil dari tutorial ini: demo navigasi dasar menggunakan CSS.
Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia
13 May 2010
[...] Image Membuat Menu Navigasi (Dasar) Menggunakan CSS [...]
irfan
03 March 2011
salam kenal.
saya baru belajar membuat blog mas, sy sdh dpt horizontal menunya dari tutorila lain. pertanyaan saya, bisakah menu yg sudah ada kita tambahkan sub menunya?
caranya bagaimana? mohon pencerahan.
terimakasih.
fikrirasyid
03 March 2011
Dropdown menu maksudnya? Saya sudah tulis tutorialnya disini: http://outstando.com/sliding-dropdown-menu-menggunakan-jquery/
kickymaulana
30 May 2011
wah, ternyata yang nulis mas fikrirasyid, saya fans nih sama dia
fikrirasyid
09 July 2011
Yap tutorial2 disini saya yang tulis. Wah, trims. Nice to hear that