Home » Tutorials » JavaScript » JQuery: Drop Down With Easing Effects

JQuery: Drop Down With Easing Effects

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

<!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>

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.

<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>

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.

<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>

Final Code

<!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>
<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>
<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>

<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>

</body>
</html>

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’.


  • LaRumeur

    It would have been great to show an exemple in this tutorial instead of let us try it by our own.
    You aslo should have put google.load to make it easier.
    At last, your code is not working at all.
    So bad.

    • admin

      Hi LaRumeur,

      First of all, thanks for reading the tutorial. If you have read the tutorial carefully, you will notice that, we do mentioned ‘Before we start our tutorial, what you need to do is to get the JQuery Easing Plugin.’ in the very first paragraph of this tutorial. In order to achieve the final result, we do mentioned in the article, which you should include latest JQuery and JQuery Easing framework into your document.

      Regards,
      The Management of onlyWebPro.com

    • Hi LaRumeur,

      First of all, thanks for reading the tutorial. If you have read the tutorial carefully, you will notice that, we do mentioned ‘Before we start our tutorial, what you need to do is to get the JQuery Easing Plugin.’ in the very first paragraph of this tutorial. In order to achieve the final result, we do mentioned in the article, which you should include latest JQuery and JQuery Easing framework into your document.

      Regards,
      The Management of onlyWebPro.com

    • Hi Gigi,

      Thanks for reading. What you have missed is the JQuery Easing Plugin. If you read the tutorial carefully, we do mentioned this in the very first paragraph of this tutorial.

      Best Regards,
      The Management of onlyWebPro.com

  • Thanks for the tutorial. Anyhow, a simple demonstration would be cool in order to see what we are getting when everything is coded.

  • vali

    Boss, this is tutorial, you don’t explain much thinks… What is queue?

Android, iOS Development Tutorials