Membuat Horizontal Menu dengan CSS plus Drop Down - Revisited
Yes, artikel pertama ditahun 2011, saya akan
mengajarkan cara membuat navigasi menu lengkap dengan drop down murni
dengan CSS. Loh bukannya sudah pernah? Ya dan itu tahun 2008! sudah basi
sudah kuno (ya nggak kuno-kuno banget sih), dan masih banyak juga
menanyakan kesulitan tentang menu tersebut dikarenakan menggunakan image
sprites. Dan karena sekarang sudah tahun 2011, maka saya akan
mengajarkannya lagi tanpa menggunakan images sama sekali.
Oke sebelum lanjut, saya asumsikan Anda sudah paham HTML dan CSS, dan
tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau
belum saya sarankan lihat artikel belajar CSS saya dari jaman baheula dulu.
Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham
mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
Membuat kode HTML
Oke kita mulai dengan kode HTML nya, oh iya berhubung
sekarang jamannya HTML5 maka saya mulai pakai HTML5, tenang aja masih
saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas
sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan
tag
<ul> dan <li>.<html lang="en"> <head> <meta charset="utf-8" /> <title>Drop Down Menu</title> <head> <body> <div id="place-nav"> <ul id="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Artikel</a></li> <li><a href="#">About</a></li> <li><a href="#">Social</a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Google</a> <ul> <li><a href="#">Google Wave</a></li> <li><a href="#">Google Buzz</a></li> <li><a href="#">Google Plus</a></li> </ul> </li> <li><a href="#">Twitter</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> </ul> </div> </body> </html>
Sip, kalau Anda perhatikan didalam
<li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li>
Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan
2 level kedalaman. Oke jika Anda cek hasilnya sementara seperti ini.
Nah sekarang sulapnya, kita ubah list yang biasa itu
menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung
saya tulis semua nanti baru saya terangin:
#place-nav { width:960px; height:35px; margin:63px 0 0 0; } #nav { height:35px; } #nav li { height:35px; float:left; display:inline; margin:0 5px; position:relative; font-family: Arial, verdana, serif; z-index:1000; } #nav li a { float:left; display:inline; height:25px; padding:10px 8px 0 8px; font-size:12px; color:#9e9e9e; font-weight:bold; text-transform:uppercase; text-shadow:0 0 3px #c7c7c7; } #nav li:hover a { text-decoration:none; color:#505050; } #place-nav ul ul { position:absolute; z-index:1200; display:none; width:186px; margin: 0; top: 35px; left:0; background:#1d87ca; padding:0 0 2px 0; } #place-nav ul li ul li { display: inline; float: left; width:186px; height:auto; border-bottom:1px solid #085d93; float: left; padding: 0; position:relative; margin:0; } #place-nav ul ul ul { position:absolute; z-index:1300; display:none; width:186px; margin: 0; top: 0; left:183px; background:#1c83ce; border-left:1px solid #1479c3; padding:0; } #place-nav ul li ul li ul li { display: inline; float: left; padding: 0; } #place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited { color:#fff; font-size:12px; width:170px; height:auto; text-transform:none; border:none; background: none; padding:9px 8px; text-shadow:none; margin:0; font-weight:lighter; } #place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover { text-decoration:none; color:#fff; background:#0f74bd; } div#place-nav li:hover ul ul, div#place-nav li li:hover ul ul {display:none;} div#place-nav li:hover ul, div#place-nav li li:hover ul {display:block;}
Joss, hasil drop downnya bisa dilihat dulu. Nah saya akan terangkan bagian-bagian yang terpenting, pertama adalah
#nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah
#nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000
buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat
slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown
dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/
Oke berikutnya
#place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;.
Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena
jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse
kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya
#place-nav ul ul ul ini
merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi
karena dorp down level kedua posisinya agak kekanan dari drop down level
1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Nah yang terakhir dan terpenting adalah:
div#place-nav li:hover ul ul, div#place-nav li li:hover ul ul {display:none;} div#place-nav li:hover ul, div#place-nav li li:hover ul {display:block;}
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat
div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none;, baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul
Sipp, gampang kan? pusing? ya udah dicoba aja, enjoy
Suka dengan artikel ini? Sebarkan keseluruh dunia melalui Jejaring Sosial berikut ini:
0 komentar:
Posting Komentar
lakukan yang terbaik