October 3rd, 2006
Dulu, saat era sebelum CSS mulai booming, menu navigasi dibuat dengan menggunakan layout dengan tabel. Entah itu horizontal atau vertikal. Bahkan bukan saja untuk menu, tapi untuk penggunaan layout web. Maka dari itu, kenapa Macromedia Dreamweaver versi 3 dan 4 sangat laku di kalangan mahasiswa komputer (waktu jaman masih kuliah). Karena begitu mudahnya mengatur layout tabel di sana.
Sekarang, sematik mulai bicara. Penggunaan menu navigasi dibuat dengan menggunakan list-item tag. Jujur saja, awalnya cukup bingung melihat kode list-item yang biasa menampilkan daftar list bisa berubah menjadi menu navigasi. Yuk, kita lihat bagaimana CSS bekerja dengan list-item ini.
Tag list-item
<ul class=”menu”>
<li><a href=”home.html”>home</a></li>
<li><a href=”about.html”>about</a></li>
<li><a href=”contact.html”>contact</a></li>
</ul>
Hasil tanpa menggunakan CSS:
Mungkin diantara kita sudah tahu, semua elemen HTML akan dianggap sebuah elemen kotak oleh CSS. Berikut kira-kira penggambaran kotak dari kode list-item di atas.

Membuat menu navigasi
Menu navigasi yang akan kita buat adalah yang versi horizontal. Jika teori dasar membuat menu sudah dikuasai, rasanya tidak terlalu masalah untuk membuat menu vertikal. Langkah pertama yang akan kita lakukan adalah menghapus margin dan padding yang secara default dimiliki tag ul.
ul.menu {
margin:0px;
padding:0px;
}
Kode CSS di atas berpengaruh terhadap elemen kotak list-item. Kira-kira elemen kotak akan berubah menjadi seperti gambar di bawah ini.

Hapus lingkaran di setiap item
Kita tidak memerlukan lingkaran hitam di setiap item. Untuk itu kita akan membuangnya lewat kode CSS. Berikut kodenya.
ul.menu li {
list-style:none;
}
Teori kata kunci float
Kata kunci float mempunyai 3 nilai, left, right, dan none. Nilai none berada pada posisi default. Kira-kira teori float digambarkan pada ilustrasi di bawah ini.

Yang perlu diperhatikan, antara nilai float left dan right sama saja. Hanya berbeda arah saja.
Nomor 1
Jika terdapat 3 kotak bernilai float:left, maka ketiga kotak tersebut akan berada sejajar dengan kotak sebelumnya.
Nomor 2
Jika 3 kotak yang berada di nomor 1 mempunyai pembatas yang juga berupa kotak. Eh, tambah satu lagi deh kotaknya. Ada 3 kotak dengan lebar 100 piksel tiap kotaknya, sedangkan kotak pembatas hanya mempunyai lebar 350 piksel. Itu berarti kurang 50 piksel lagi. Untuk itu kotak terakhir turun ke baris berikutnya.
Got it? Harus!
Kita kembali ke menu navigasi. Karena kita akan membuat menu horisontal, maka teori dasar dengan kata kunci float bisa kita gunakan. Kita lihat kode CSS-nya.
ul.menu li {
list-style:none;
float:left;
}
Dari kode CSS di atas, maka elemen kotak sekarang berubah. Lihat perubahannya. Besarnya kotak ternyata tergantung dari lebar isi kotak.

Sekarang kita tentukan lebar kotak.
ul.menu li {
list-style:none;
float:left;
width:100px;
}

Jangan lupa, posisi text harus di tengah
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
}

Sekarang kita akan tentukan tingginya. Untuk menggunakan tinggi, akan lebih baik menggunakan kata kunci line-height daripada padding.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:25px;
}
tapi akan lebih baik lagi jika kita menggunakan tag font. Lihat kodenya baik-baik.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
}
Tapi sayang, cara ini kurang berhasil di IE. Untuk itu, kita perlu menambahkan 2 baris kode yang membuat kode CSS kita berjalan dengan baik.
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
Loh, kok bisa? silahkan lihat lagi tutorial yang pernah aku tulis sebelumnya. Dan inilah hasilnya setelah kita tambahkan tinggi.

Link Menu
Jika kita lihat lagi tag list-item, kita lihat ada sebuah link yang ditandai dengan tag a. Maka kita juga perlu untuk membuatkan CSS-nya. Tapi sebelumnya, mari kita lihat bagaimana bentuk kotak tag a sejauh ini. Di gambar di bawah ini, kotak tag a ditandai dengan kotak berwarna abu-abu.

Yang menjadi pertanyaan, kenapa tag a tidak secara penuh mengisi tag list? Ya, salah satunya, karena ELEMEN KOTAK LEBARNYA BERGANTUNG PADA ISI (kecuali untuk tag div) CMIIW. Untuk itulah kita perlu menambahkan kode CSS yang membuat elemen kotak link memenuhi ruang yang ada. Oh iya, sekaligus menghilangkan garis bawah yang dipunyai setiap link.
ul.menu li a {
display:block; /* buat kotak link memenuhi ruang yang ada */
text-decoration:none; /* hapus garis bawah */
background:#EFEFEF;
color:#000000;
}
Nah, kode CSS akan berubah menjadi seperti gambar di bawah ini.

Nah, sekarang sebenarnya kita sudah selesai. Tapi rasanya kurang lengkap jika kita tidak merubah warna background saat mouse berada di atas salah satu kotak. Maka dari itu kita tambahkan kode berikut ini.
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}
Selesai!
Jadi, secara lengkap bisa kita tuliskan berikut ini:
<ul class="menu">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
Dan inilah kode CSS-nya:
ul.menu {
margin:0px;
padding:0px;
}
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
ul.menu li a {
display:block;
text-decoration:none;
background:#EFEFEF;
color:#000000;
}
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}
Ayo dong, kasih usul apalagi tutorial berikutnya. Kalau review design orang (seperti yang diusulkan mas Firman), sepertinya aku ini udah paling jago aja, padahal mah kagak. Drupal (seperti yang diusulkan Fany)? wekekeke… kagak bisa. Belum mulai belajar karena belum ada projek pakai drupal… :D
67 Responses
Nice tips bro!
mas caranya buat intro web itu gimana
keren abizzzz
weew, manteb dech Tutorial-nya mo
request boleh ^_^ ? caranya bikin menu drop-down di css :D ??
Asik ni tutorialnya. Tambahin dong dengan pseudocode nya untuk elemen a nya. Trus saya ada masalah neh sedikit untuk pseudocode nya a:active kok gak mau ya. Maunya saya membuat warna yang berbeda jika saya berada di halaman yang bersangkutan. Idenya donk. Thanks sebelumnya. Ragards, Gede.
Cool! Ini baru tutorial yang berguna. Jauh lebih berguna dan jauh lebih jelas 10x lipat! Saya baru tau ada tutorial bagus kayak gini. Thanks Bung.
mas klo efek nafigasi menu lainnya gmana?
xxxxxxxxxxxxxxxxxx
waduh makasih oom, ini yang saya cari, penjelasannya dari dasar..salam kenal oom
Lagi2 bahasanya mengalir bagai air
Aku dah sering baca tip nya mas didat, ok banget, gimaa caranya memasang gambar kotak yg dibuat di Adobe ImageReady ya mas ? biar ada efek nya dikit, trus aku ada masalah ma templet pakai donload-an eh iklan text Ads ma Text AdLink nya ikut nempel di body cara menghilangkannya gimana ya mas ? Tipsnya kurang spesifik mas kl buat yg awam ga ngerti, script itu diletakkan dimana ? Trus pengen tau tips mengatur link posting ke masing2 menu
thank’s
Mas, Saya pembaca baru, gimana kalau dikasi contoh bikin template blogspot dari nol, jadi bener2 bikin sendiri.
Style2 khusus apa saja yang dipunyai template blogspot (misal buat judul posting, penulis, tanggal posting, itu kan udah didefinisikan oleh blogspot – kalau gak salah lho ya, saya baru belajar juga sih).
Ditunggu ya ^_^
klo buat vertical menu yg ada navigasinya gmn?
Umm, pak guru…
i need help!!
buat bikin form dan cara input komentar untuk tiap artikel kedalam db, tolong pak guru.
btw, udah ngisi blom, balapan tah sama saya hihi…
css-nya versi berapa Pak Didats dengan kode – kode seperti itu aja udah bisa menciptakan kotak? Padahal aku masih make “padding” lho untuk buat kotak. Kayaknya aku ketinggalan deh :-,) –> ini senyum dg lesung pipi
mas kalo bikin menu navigasi yang turun naik tu gimana?pake plugin apa ya biar jadi…