Phil Parsons

jQuery animated navigation menu

jQuery provides some pretty cool effects which can be achieved with very little code. Here is a cool pop down tab style menu you can use with some simple css and a touch of jQuery.

View the demo

The HTML

Ok the html here is basic just throw in an unordered list with the id of “nav” or whatever identifier you wish to use for your project.

<ul id="nav">
    <li><a href="">home</a></li>
    <li><a href="">about</a></li>
    <li><a href="">portfolio</a></li>
    <li><a href="">blog</a></li>
    <li><a href="">contact</a></li>
</ul>

The CSS

Here we want to display our list items inline, float the links left as we need to set their display to block so that we can add our padding and margins and absolutely position the menu at the top of our page or parent div (if using a parent div you’ll need to have its position set absolute or relative also). I’ve also added some borders to my links to fully demonstrate the final effect but you will no doubt have your own styling to suit your project.

    #nav
	{
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#nav li
	{
		display: inline;
	}

	#nav li a
	{
		float: left;
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 10px 30px;
		margin: 0 10px 0 0;
		border: solid 2px #fff;
		border-top: none;
	}

The JQuery

We will be using the animate() function to increase the top padding on each link when the user hovers their mouse over it and then return it to normal once the user moves off of the link. JQuery provides us with a handy hover() method to which we can pass two functions, one for the initial hover effect and the second for the off effect. Here’s the code:

<script type="text/javascript">
	$(function() {
		$("#nav li > a").hover(function() {
			$(this).stop().animate({paddingTop: "20px"}, 100);
		},
		function() {
			$(this).stop().animate({paddingTop: "10px"}, 200);
		});
	});
</script>

For this to work you will need to load the jquery library with your page which will either involve downloading the latest version or, as I usually prefer to do, hot linking to it as below:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

you can find the latest version of the JQuery library here.

Breaking down the code

The code is very straightforward but I’ll break it down and explain each part. Firstly we need to check that the DOM is ready before we run any code which is done with the shorthand:

 $(function() {...}); 

or can also be done via:

 $(document).ready(function() {...}); 

Inside our function we want to access all of the links within our “nav” unordered list which is done with the selector

 $("#nav li > a") 

and attach the hover effect to those links

 $("#nav li > a").hover(fn, fn) 

Now we add code to the two functions to increase and decrease the top padding property of the link being hovered by use of the this keyword and the animate method:

 $(this).stop().animate({paddingTop: "20px"}, 100); 

the call to stop() before animate() ensures that any animation already triggered on the given link is stopped before starting the effect. The first function increases the top padding to 20px in 100ms and the second returns it to 10px in 200ms giving a nice fluid appearance. You can set these to whatever suits you and your project or perhaps play around with it for some other cool effects.

View the demo

Posted on June 6th, 2009 under JQuery tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.