Easily create an animated nav menu

05 May, 2009

Posted by: Mahbub In: misc

This is a very short post of how we can easily create an animated navigation menu with jQuery without any plugin. You must have seen horizontal or veritical navigation menus that expands and contracts its size on rollover. Before these javascript framework came, we had to do quite a lot of code to get the things done. Why? That stupid cross browser handling. I don’t want to start over on IE.

Ok, here’s the thing. We’re simply using an unordered list to make a horizontal menu that expands and contracts. Code is dead simple. Let’s look at the markup first.

<div id="navcontainer">
<ul id="navlist">
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://www.yahoo.com">Yahoo</a></li>
	<li><a href="http://www.msn.com">MSN</a></li>
	<li><a href="http://www.lycos.com">Lycos</a></li>
	<li><a href="http://www.baidu.com">Baidu</a></li>
</ul>
</div>

So we have some list items there. So make them appear like horizontal menu we’d need some css which looks like this

*{
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #222;
color: White;
float: left;
width: 100%;
font-size:13px;
text-transform:uppercase;
font-weight:bold;
}
 
#navcontainer ul li { display: inline; }
 
#navcontainer ul li a
{
padding: 0.7em 1.8em;
background-color: #222;
color: White;
text-decoration: none;
float: left;
width:100px;
border-right: 1px solid #fff;
}

And the final part .. Making them dance on mouseover. Quite simple with the animate function. Just couple of these lines below will do the trick. Have a look.

	$(function(){
		$("#navlist a").hover(function(){
			$(this).css("background-color","#369");
			$(this).animate({ width: '200px'}, {duration: 200,queue:false});
		},
		function(){
			$(this).css("background-color","#222");
			$(this).animate({ width: '100px' }, {duration: 200,queue:false});
		});		
	});