designing4u.de Yet Another Coding Blog

Simple drop down menu with jQuery

I recently was looking at the online documentation of jQuery and I've found a really nice event listener, which helps you to provide interaction with the user. I'm writing about it, because couple weeks ago I've found myself trying to provide a drop down menu using jQuery. I was playing around with mouseover and mouseout effects, but I couldn't really find the right way to display my drop down menus. The solution is simpler than I thought. Here is how I've done that.

After we'll be done, our final solution should look more or less like that:

DEMO PAGE

As usually we need to include our jQuery library in the head of our document. Here is the code I used to accomplish this example:

1. CSS
[source:html]
.navi {
margin:0;
padding:0;
list-style-type:none;
position:absolute;
}
.navi .navi-point {
float:left;
margin:2px;
padding:5px;
border:1px solid #000;
background:#ccc;
width:80px;
}
.sub-navi {
margin:0;
padding:0;
list-style-type:none;
display:none;
}
.link {
cursor:pointer;
}
[/source]

2. jQuery
[source:javascript]
$(document).ready(function(){
$('.navi-point').hover(
function () {
$('.sub-navi',this).slideDown(1000);
},
function () {
$('.sub-navi',this).slideUp(1000);
}
);
});
[/source]

3. HTML
[source:html]

• link1
  • link1.1
  • link1.2
  • link1.3

[/source]
Basically we are triggering our function after the DOM is ready and we are listening until user hovers over one of the span elements with class 'link'. The rest will jQuery do for us. You can replace the slide effect with fade effect, however you will need to change CSS to do that. Of course, if you want that your drop down menu covers the text, which will be displayed beneath it, you need to position it correctly in CSS. Have fun with it.