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:

Markup of Semantic Navigation

(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

Basic Semantic Navigation Using CSS

Sekarang lihat hasil dari tutorial ini: demo navigasi dasar menggunakan CSS.

5 thoughts on “Membuat Menu Navigasi (Dasar) Menggunakan CSS

  1. […] Image Membuat Menu Navigasi (Dasar) Menggunakan CSS […]

  2. 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.

    1. Dropdown menu maksudnya? Saya sudah tulis tutorialnya disini: http://outstando.com/sliding-dropdown-menu-menggunakan-jquery/

  3. wah, ternyata yang nulis mas fikrirasyid, saya fans nih sama dia

    1. Yap tutorial2 disini saya yang tulis. Wah, trims. Nice to hear that 😀

Share Your Thought