First, we are creating simple unordered list with three menu items,
<ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul>
Now I am going to arrange it properly to horizontal bar using simple and most basic CSS codes.
<style>
ul {list-style:none;margin:0;padding:0;}li {float:left;width:100px;margin:0;padding:0;text-align:center;}li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}#navbar a {background:url(img.jpg) repeat 0 0;}#navbar a:hover {background-position:100px 0;}</style>
Put it inside the <head> tag.
In the CSS code above, img.jpg is the background image of the link.
Now the backend hero of the animated navigator effect:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="bgpost.js"></script>
<script type="text/javascript">
$(function(){
$('#navbar a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
});
</script>
The above code too goes inside <head> tag.
In the above code, we’ve called jquery library from Google’s API. And another jQuery plugin for background position effect (Which plays the vital role for animation) in our own server.
You can download the background position plugin of jQuery here.
Now you’ve all the files necessary ready.
Img.jpg (background image for the navigation bar)
Webpage.html (where the interface resides)
Bgpost.js (background position javascript file, you can rename it to anything)
The above codes must be arranged in the following format for webpage.html:
Upload it to your web host or local host and see it in action.
View live demo here.
Hope this tutorial was interesting and helpful.
Posted in 
Tags: