Untuk membuat sebuah dropdown sederhana kita tidak membutuhkan sebuah pluggin jquery yang begitu kompleks untuk membuatnya.. cukup dengan mengunakan beberapa baris script sederhana menggunakan jquery. adapun langkah yang harus di lakukan adalah
Download | Demo
1. Persiapkan struktur dan style menu dropdown
Untuk dropdown sederhana kita hanya akan menggunakan 1 level dropdown. adapun struktur html yang akan di bentuk adalah seperti berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <ul id="pgmenu"> <li> <a href="#" class="sub">Main menu<span> </span></a> <ul> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">Drop Down Menu</a></li> </ul> </li> <li> <a href="#" class="sub">Import<span> </span></a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Slide Effect</a></li> <li><a href="#">Slide Effect</a></li> <li><a href="#">Slide Effect</a></li> <li><a href="#">Slide Effect</a></li> <li><a href="#">Slide Effect</a></li> </ul> </li> <li><a href="#">Export</a></li> <li><a href="#">Help</a></li> </ul> |
Struktur Css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | pgmenu
{ margin: 0;
padding: 0
}
#pgmenu li
{ float: left;
list-style: none;
font-size: 12px;
}
#pgmenu li a span{
background:red;
padding:2px 0 2px 6px;
background:url("img/desc.gif") no-repeat center right;
}
#pgmenu li a
{ display: block;
background: #777;
padding: 4px 12px;
text-decoration: none;
color: #000;
white-space: nowrap;
}
#pgmenu li.pgmv a{
background: #2f6795;
color:#d5e1ea;
}
#pgmenu li a:hover{
background: #2f6795;
color:#d5e1ea;
}
#pgmenu li ul
{ margin: 0;
position: absolute;
visibility: hidden;
width:150px;
padding:2px;
background: #2f6795;
}
#pgmenu li ul li
{ float: none;
display: inline}
#pgmenu li ul li a
{ width: auto;
color:#d5e1ea;
border:none;
background: #2f6795;}
#pgmenu li ul li a:hover
{
background:black;
color:#ffffff;
} |
2. Beri event pada menu tersebut
Setelah strukturnya terbentuk, baru di beri event pada menu tersebut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | //-- Menu variables ------------- var timeout = 0; var closetimer = 0; var menuItem = 0; $(document).ready(function(){ //-- Page dropdown menu document.onclick = dropMenu_close; $('#pgmenu > li').bind('mouseover', dropMenu_open); $('#pgmenu > li').bind('mouseout', dropMenu_timer); $('#pgmenu>li>ul,#pgmenu>li>ul>li').mouseover(function(){ var parent = $(this).parents('li'); $(parent).addClass('pgmv'); }); $('#pgmenu>li>ul, #pgmenu>li>ul>li').mouseout(function(){ var parent = $(this).parents('li'); $(parent).removeClass('pgmv'); }); }); function dropMenu_open() { dropMenu_canceltimer(); dropMenu_close(); menuItem = $(this).find('ul').css('visibility', 'visible'); } function dropMenu_close() { if(menuItem) menuItem.css('visibility', 'hidden'); } function dropMenu_timer() { closetimer = window.setTimeout(dropMenu_close, timeout); } function dropMenu_canceltimer() { if(closetimer){ window.clearTimeout(closetimer); closetimer = null; } } |
Silakan berkunjung ke blog saia, mari bertukar link blog Kawand...
Mas, mau tanya aku coba bikin drop down menu, salah satu menunya itu kalo di klik ntar tampilin form yg ada select boxnya.
anehnya, kalo misalnya saya pilih lagi salah satu menu dari drop down menu tsb dan menunya panjang bgt ke bawah (melewati select box ), ntar menu yg harusnya nutupin select box jadi tidak tampak (ketutupan sama select box).
terima kasih
Itu harus di liat gimana dulu .. banyak kondisinya.. bisa diupload?
kalo saya kirim ke email aja gimana?? alamat email mas apa? makasih
Mas, saya sudah dapat salah satu link u/ solusinya
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm#theme
(kayknya masalahnya karena saya pake IE 6, dikantor emang standarnya pake IE)
tapi saya bingung, cara nambahin sub menu lagi (biar menunya jadi 3 tingkat).
ada saran ga mas gimana cara nambahin sub menu di css link tsb?
nuhun
atau mgkn bisa coba yg ini utk drop down menu nya, dan bisa pake Sub Menu :
http://css-tricks.com/examples/SimplejQueryDropdowns/
@ mas kur
terimakasih atas sarannya. saya sudah coba yg mas maksud, tapi waktu saya tambahin select box, di halaman tsb, drop down menunya jadi ketutupan sama select box kla opake browser IE 6. [kembali ke masalah awal jadinya]
itu bisa di atasi dengan css
yang mau diatas set z-indexnya lebih tinggi
Ok mantab . .
Bisa di coba nich. . .
mas mau tanya jg. . .
lo cari taw kegunaan2 dr Jqwery t apa ad library catalogX???
Wah, nice. ilmu dasar yang bisa dipake di mana aja neh. thanks to share.
Tq gan :)
mas, mau tanya....code dg judul "2. Beri event pada menu tersebut" dipaste dimn ya byar bisa jalan?
trimakasih bauuuuuanyak mas
diliat dr strukturnya emang sederhana...
tp berhubung blm prnh bwt jd bingung...
script trakhir diletakkan dibagian mana ya?
mgk bisa dperjelas dg memberi contoh masing² script disimpan sbg nama file apa gitu...
trima kasih
Mantab bro... :)
Dear Mas Ibnu,,
btw kL mw buat menu dropdown php di CodeIgnitter, gmn codingnya,,
n jg dapat me-link-kan menu tersebut ke tampilan lain.
mf baru bljr php..
thanks..
Nice share...patut dicoba
manteb gan tutornya..., tak coba dulu ya....
thanks mas tutorialnya....
:D
slam kenal Mas Ibnu,
kalo bikin menu, sub menu, dan sub sub menu bisa gak? tp semua datanya ngambil dari database..., biar dinamis gitu...
salam,
juni
@juni : tinggal bikin script php yang generate persis sama dengan html yang di contoh
Artikel yang informatif, makasih banyak atas sharing ilmunya
thankz.. i am a new web developer
Mantab gan ...ilmunya. mkasih
@ibnoe : itu mah lo ketauan males
mas mau nanx kl pda codeigniter iventx dsmpan dmn????,,tanx....
wah mantap ne postinganya.... :)
permisi saya mau nanya cara menggunakan menu dropdown tiga tingkat menggunakan database
saya juga mau nanya, gimana caranya biar dropdownnya jadi 3 tingkat
@rizky.. bisa.. tapi codenya ada sedikit di ubah
mas ibnoe, usul donk,ditampilkan hasil dari menu dropdown nya, biar tau hasil yang kita akan buat seperti apa, makasiih :))
mas boleh mau nanya..
saya coba membuat seperti yg mas buat,, tp kenapa ndak bisa drop down ya?
mohon pencerahannya.. thax