Membuat dropdown menu tidak sesulit yang dikira. Anda tidak butuh plugin jQuery atau trik-trik rumit lainnya. Cukup relative – absolute positioning, display:none dan efek standar jQuery.

Caranya mudah. Sekarang, coba perhatikan markup berikut. Sebuah menu sederhana yang disusun dari sebuah one-level unordered list:

<ul id="one">
<li><a href="">Level 1 item 1</a></li>
<li><a href="">Level 1 item 2</a></li>
<li><a href="">Level 1 item 3</a></li>
<li><a href="">Level 1 item 4</a></li>
</ul>

Di-styling menggunakan CSS sesederhana ini:

#one li a {
float:left;
padding:8px 10px 5px 10px;
background:#efefef;
}

#one li a:hover{
background:#cfcfcf;
}

Untuk membuat dropdown menu, yang anda perlukan adalah two-level unordered list.

<ul id="two">
<li><a href="">Level 1 item 1</a></li>
<li>
<a href="">Level 1 item 2</a>
<ul>
<li><a href="">Level 2 item 1</a></li>
<li><a href="">Level 2 item 2</a></li>
<li><a href="">Level 2 item 3</a></li>
<li><a href="">Level 2 item 4</a></li>
</ul>
</li>
<li><a href="">Level 1 item 3</a></li>
<li><a href="">Level 1 item 4</a></li>
</ul>

Markup ini pada dasarnya sama dengan markup diatas. Hanya saja pada li yang hendak dibuat dropdown, diletakkan lah unordered list lagi di dalamnya.

Logika styling CSS-nya:

  • float: left dan beri position: relative kepada li level pertama.
  • Set position: absolute + value top dan left ul level kedua. Set juga width-nya.
  • float li & a di level kedua. Width elemen yang menjadi dropdown diset fixed.
  • Setelah semua elemen berada di posisi-nya, set display: none kepada ul level kedua.
  • Untuk memunculkan dropdown, gunakan fungsi hover() dan slideToggle() atau fadeIn()

Styling CSS-nya kurang lebih akan menjadi seperti ini:

#two li a {
float:left;
padding:8px 10px 5px 10px;
background:#efefef;
}
#two li a:hover{
background:#cfcfcf;
}

#two li{
float:left;
position:relative;
}

#two li.parent > a{
padding-left:20px;
background:url(images/menu-arrow-down.png) 5px center no-repeat #efefef;
}

#two li.parent > a:hover{
background:url(images/menu-arrow-down.png) 5px center no-repeat #cfcfcf;
}

#two li ul{
float:left;
width:120px;
position:absolute;
top:28px;
left:0;
display:none;
}

#two li ul li a    {
float:left;
width:100px;
}

Lalu fungsi jQuery-nya akan menjadi seperti ini:

$(document).ready(function() {
$("#two li").has("ul").addClass("parent");
$("#two li").hover(
function(){$(this).find("ul").slideToggle();},
function(){$(this).find("ul").slideToggle();}
);
});

Tampilannya bisa dilihat di halaman demo tutorial ini:

Demo Sliding Dropdown Menu Menggunakan jQuery

8 thoughts on “Sliding Dropdown Menu Menggunakan jQuery

  1. Kalo pake JQuery saya kurang ngerti soalnya saya belom utak atik itu *cupu banget 😳
    Bukan dropdown nya Bang yang sulit, tapi multidropdown pake css murni
    Jadi kalo misal orang masang 3 level dan seterusnya hingga 10 atau bahkan 20 level lebih dropdown, CSS nya itu gimana ya? 🙄

    1. Coba pelajari jQuery. Sekali “nangkep” fungsinya jQuery, pasti nagih deh 😛

      Kalo pake css doang bisa juga sih, pake pseudo-class :hover. Cuma kekurangannya ya ngga jalan di quirky browser macam IE yang ngga ngesupport pseudo-class :hover.

      Untuk multi level dropdown sama aja sih konsepnya: li parent dibuat relative, ul child-nya dibuat absolute. Tinggal positioning si ul-nya aja yang di utak atik, biasanya kan disebelah kanannya ya. Karena width li-nya fixed, ya tinggal diset saja property right: nya 🙂

  2. #two li.parent > a:hover{
    background:url(images/menu-arrow-down.png) 5px center no-repeat #cfcfcf;
    }

    ini ko ada fileimagesnya ya mas ..
    imagesnya yang mana ya ..
    saya liat contoh demonya kayanya nga ada imagesnya ..?

  3. Kalau ada boleh deh Fik minta source codenya…

  4. Mantabss gan, gw coba langsung 86 gan!!!! mantabss ga usah pake plugin JQuery…..nice info

  5. makasih banyak bro.. membantu sekali

  6. Hello, I have just updated WordPress to 2.8 and CFI to 1.9 and now I am gtenitg this error when using both the get_custom_field_image() and custom_field_image() tags:Fatal error: Call to a member function generate() on a non-object in […]wp-content/plugins/custom-field-images/template-tags.php on line 26Does anybody know what is this?Thank you.

Share Your Thought