JQuery: Drop Down With Easing Effects

In this tutorial, we are going to create an easing effect of drop down menu with JQuery. Before we start our tutorial, what you need to do is to get the JQuery Easing Plugin. With the easing plugin, you can easily adds more animation transition to the menu later, such as bouncing effect.

HTML Structure

[xhtml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery: Drop Down With Easing Effects | onlyWebPro.com</title>
</head>
<body>
<div id="menu_top">About Us</div>

<div id="menu_content">
<div class="info">
<p>Menu Content</p>
</div>
</div>

<div id="menu_bottom">
<p>Page content</p>
</div>
</body>
</html>
[/xhtml]
As you can see the structure above, we have divide the structure into 3 parts: #menu_top, #menu_content and #menu_bottom. The #menu_top is used to detect mouse over event and trigger the #menu_content animation; The #menu_content is consists of the content you wish to display; The #menu_bottom is binded to mouse over event, it hides the #menu_content when user mouse over on it. Ok, we have done the structure of the drop down menu, let’s style it using CSS.

CSS

First of all, we have to reset the default styling of body, make its margin and padding to 0. Next, we define the properties of height, background-color and etc for #menu_top, #menu_content and #menu_bottom. One thing, you need to pay attention here is the negative value of top properties for #menu_content. The negative value is used to hide the #menu_content from the screen, so you may play around with the negative value and adjust it to suit your own design.

[css]
<style>
body {
margin:0;
padding:0
}

#menu_top {
height: 70px;
background-color:#999;
text-align: center;
}

#menu_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#fff;
text-align: center;
}

#menu_content {
background: #333;
color: #aaa;
position: absolute;
width: 100%;
height: 150px;
top: -205px;
text-align:center;
z-index:999;
}

#menu_content .info {
height: 150px;
margin:0 auto;
}
</style>
[/css]

JavaScript

Ok, now it’s time to apply interactivity on the menu we just created. Link the JQuery and Easing plugin to your document and start insert the following code into your document. We bind the mouse over event to #menu_top and #menu_bottom to show and hide the #menu_content.

[javascript]
<script type="text/javascript">
$(document).ready(function() {

var top = ‘-‘ + $(‘#menu_content .info’).css(‘height’);
var easing = ‘easeOutBounce’;

$(‘#menu_top’).mouseover(function() {
$(‘#menu_content’).animate({‘top’ : 0}, {queue:false, duration:1000, easing: easing});
});

$(‘#menu_bottom’).mouseover(function() {
$(‘#menu_content’).animate({‘top’ : top}, {queue:false, duration:500, easing: easing});
});

});
</script>
[/javascript]

Final Code

#menu_top {
height: 70px;
background-color:#999;
text-align: center;
}

#menu_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#fff;
text-align: center;
}

#menu_content {
background: #333;
color: #aaa;
position: absolute;
width: 100%;
height: 150px;
top: -205px;
text-align:center;
z-index:999;
}

#menu_content .info {
height: 150px;
margin:0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
</head>

<body>

<div id="menu_top">About Us</div>
<div id="menu_content">
<div class="info">
<p>Menu Content</p>
</div>
</div>

<div id="menu_bottom">
<p>Page content</p>
</div>

var top = ‘-‘ + $(‘#menu_content .info’).css(‘height’);
var easing = ‘easeOutBounce’;

$(‘#menu_top’).mouseover(function() {
$(‘#menu_content’).animate({‘top’ : 0}, {queue:false, duration:1000, easing: easing});
});

$(‘#menu_bottom’).mouseover(function() {
$(‘#menu_content’).animate({‘top’ : top}, {queue:false, duration:500, easing: easing});
});

});
</script>

</body>
</html>
[/xhtml]

That’s all! Save your document and preview it on your browser, you should able to see the interactive drop down menu appear when you mouse over on the ‘About Us’.

JQuery: Drop Down With Easing Effects

HTML Structure

CSS

JavaScript

Final Code

Advertisement