Membuat Menu Navigasi (Dasar) Menggunakan CSS

Written by Fikri Rasyid

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.

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

4 Responses for This Thought

  1. Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia

    13 May 2010

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

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

    Reply
  3. kickymaulana

    30 May 2011

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

    Reply
    • fikrirasyid

      09 July 2011

      Yap tutorial2 disini saya yang tulis. Wah, trims. Nice to hear that :D

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>