In this post I'm going to show you how to create a sliding drop-down menu using jQuery animations. Our menu is made up of two components: the initial CSS styles that hide the sub-menu and the jQuery code that hides and reveals it after certain user actions. As you will see, the most difficult part in this code is surely the CSS part. In fact, we need first to understand a simple thing: to get the effect of a menu that slides from top to bottom, you have to initially set its height to 0 and then restore this height to a certain value. To prevent browsers from showing the contents of this sub-menu, we have to use the overflow property with a value of hidden.
However, let's start with the underlying HTML structure:
<ul id="navigation"> <li><a href="#">Home</a></li> <li class="subnav"><a href="#">Articles »</a> <ul> <li><a href="#">Article 1</a></li> <li><a href="#">Article 2</a></li> <li><a href="#">Article 3</a></li> </ul> </li> <li class="subnav"><a href="#">About »</a> <ul> <li><a href="#">About me</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Works</a></li> </ul> </li> <li class="last"><a href="#">Contacts</a></li> </ul>
As you can see, the items with the CSS class subnav contain our sub-menu. Now we can apply our CSS styles:
body {
margin: 0;
padding: 0;
font: 62.5% Arial, sans-serif;
}
#navigation {
background: #333 url(sliding-dropdown/bg-menu.gif) repeat-x;
height: 10em;
margin: 0;
padding: 0 1em;
list-style: none;
position: relative;
}
#navigation > li {
float: left;
height: 100%;
margin-right: 0.5em;
background: url(sliding-dropdown/bg-item-menu.gif) no-repeat 100% 50%;
line-height: 10em;
}
#navigation li.last {background: transparent;}
#navigation > li > a {
padding: 0 1em;
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-size: 1.6em;
}
#navigation > li > a:hover {color: #d0d0d0;}
#navigation li.subnav ul {
margin: 0;
padding: 0;
width: 15em;
height: 0px;
overflow: hidden;
background: #333;
list-style: none;
border-radius: 0 0 6px 6px;
position: relative;
top: -3px;
}
#navigation li.subnav ul li {
width: 90%;
margin: 0.5em auto;
background: transparent;
line-height: normal;
}
#navigation li.subnav ul li a {
padding: 0;
font-size: 1.6em;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#navigation li.subnav ul li a:hover {color: #e0e0e0;}
In this code, the main role is played by the overflow property set on the sub-menu. By using this property, we actually hide our sub-menu. Now we can add jQuery:
$(document).ready(function() {
$('#navigation li.subnav').each(function() {
$(this).find('a:first-child').mouseover(function() {
$(this).next().animate({
height: 100
}, 'slow');
});
$(this).find('ul').click(function() {
$(this).animate({height: 0}, 'slow');
});
});
});
When a user hovers an active link, our sub-menu is shown by setting its height property to a proper value. On the contrary, when a user clicks on the sub-menu (for example by activating a link), the menu is hidden by setting its height property to 0 again. You can see a demo below.