Creating awesome jQuery menu for your website or blog

Interactive animations makes your website much user friendly and enjoyable. Previously flash used to be the only means of animated interactive contents. Now with release of AJAX and minimized javascript library, JQuery, we are able to create interactive pages without the need of flash. This time, I am here to present you the jQuery technique to create your own awesome animated navigation bar.
First, we are creating simple unordered list with three menu items,

        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>

Now I am going to arrange it properly to horizontal bar using simple and most basic CSS codes.

ul {
li {
li a {
padding:5px 10px;
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=""></script>
<script type="text/javascript" src="bgpost.js"></script>

<script type="text/javascript">
$('#navbar a')
.css( {backgroundPosition: "0 0"} )
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})

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.

You can leave a response, or trackback from your own site.

Leave a Reply