17
Jul
2012

Animated menu with jQuery

Posted in: jQuery No Comments

jquery_logo
In this jQuery tutorial I will show you how to make an animated or sliding menu links. When you hover over any link, it will slide to right and when you remove the mouse it will return back to its old position.

Step 1:
create some navigation links

<ul class="sliding-nav">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
</ul>

Step 2:
Call jQuery Library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3:
Now we will add jQuery code in head section and tell it to find all li elements under class sliding-nav. And when hover over any link, move the link to right by 20px

<script type="text/javascript">
$(document).ready(function(){
	$(".sliding-nav li").hover(function() {
	$(this).stop().animate({"padding-left": "20px"});
	},
	function() {
	$(this).stop().animate({"padding-left": "0px"});
	}
	);
});
</script>

Done!!!
Check live demo

you can also control the slide / animation speed. And you can also change the direction of movement.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply