animnav

Animated Navigation Bar Using jQuery

View Demo Download Source Code

In this tutorial we will be making a navigation bar with animated background. To create this effect we will be using HTML, CSS and  jQuery. I am assuming that the readers are well versed with CSS & HTML and have the basic understanding of jQuery.

Let’s jump right into it then:

HTML Code:

</pre>
<div class="container">
<div id="navbar1">
<ul id="sprite">
	<li id="b0" class="a0">Home</li>
	<li id="b1">News</li>
	<li id="b2">Blog</li>
	<li id="b3">Pictures</li>
	<li id="b4">Videos</li>
	<li id="b5">Gallery</li>
	<li id="b6">About</li>
	<li id="b7" style="border-right: 1px solid #1f1f1f;">Contact</li>
</ul>
</div>
</div>
<pre>

CSS Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
	width:960px;
	margin:0px auto;
	color:#FFFFFF;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
#navbar1{
	float:left;
	width:960px;
	height:36px;
	font-size:14px;
	margin:20px 0 0 0;
	background:url(images/navbar_bg.png);
}
#navbar1 ul{
	float:left;
	width:585px;
	height:36px;
	margin-left:188px;
	color:#000000;
}
#navbar1 ul{
	background: url(images/anim_3.png) no-repeat;
	background-position:1px 4px;
}
#navbar1 ul li{
	float:left;
	width:72px;
	margin:3px 0 0 0;
	height:22px;
	display: inline;
	text-align:center;
	padding:7px 0 0 0;
	border-left:1px solid #1f1f1f;
	cursor:pointer;
}

This technique is only effective when using a predefined width for each button or list item as shown in the above image, this can also be implemented on navigation bars using dynamic widths, but you might have to change the jQuery and the image sprite quite a bit to achieve any kind of consistency in your design. Well to give you a basic explanation as to how we will animate the navigation bar from here on in, we will take a background image equal to the size of the list item, which, on mouse-over positions itself to the left of each respective list item. So, as you can see in my HTML code I have named(id) my unordered list as ‘sprite’ with a backround image. I have also named(id) my list items b0,b1,b2,b3….b7, depending on the number of list items you wish to have in your navigation bar. I’ll explain why we are doing this in a bit, after you read through the jQuery code.

jQuery Code:

$(document).ready(function(){
	var selected=0; // Default background position
	var position=0;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
	/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
	});
});

Step By Step Read Through:

  • In the first line, we define the default background position of the background image of #sprite (even though, we’ve already mentioned the default background position in the CSS file, we still have to declare the default background position in jQuery, because for some reason, Internet Explorer shows an error after repeated mouse-over states).
  • Now, on mouse-over of any of the list items, we simply calculate the background position of the image in the background of #sprite and using the animate method of jQuery we move it to its destined location. For example: On mouse-over of b0, in my case I moved it 0 * 73(width of my button) i.e. 0 pixels from the left of #sprite. On mouse-over of b1, I moved it 1 * 73 i.e. 73 pixels from the left of #sprite. On mouse-over of b2, I moved it 2 * 73 i.e. 146 pixels from the left of #sprite, so on and so forth. That is the very reason I named (id) my list items b0, b1, b2…, so that I can slice out the numerical values from it using slice(1,2).
  • Using the sliced numerical values we calculate the position of the background image, finally animate it and avoid a list of if else statements for each list item.
  • On mouse-out of any of the list items the background image comes back to its original position i.e. 0px (var selected;) from the left and 4px from the top.
  • Now, if you got any of the stuff I’ve explained there is one question popping in your head that do I have to manually give value to the variable “selected” for every page , well to avoid this you just have to edit the jQuery from the top to the one below.
$(document).ready(function(){
	var check;
	var i;
	for(i=0;i		if($(".a"+i+"").attr("id")){
		check=$(".a"+i+"").attr("id").slice(1,2);
		}
	}

	var selected=check*($("#b0").outerWidth());
	var position;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($("#b0").outerWidth());/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:300});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:300});
	});
});

Now we can easily name the class a0 or a1 or a2 or a4 of our list item (active list item) in our HTML to set the default background position of our background in #sprite and the script basically looks for the class with prefix “a” then slices out the next element i.e. 0 or 1 or 2 or 3, etc and multiplies it to the width of the element and gives it a default position from the left.

Feel free to leave comments if you appreciate the tutorial or if you have any problems implementing it.

Thanks for reading.

  • Gus Co

    Very good Script for a Great Start!!!
    But remember to always link to a zip file with all the files needed.

    Thanks and Keep Up the good work

  • http://yeswebdesign.com.au Josh

    Thankyou Atul, Nice tutorial, this is great!

  • http://www.tylerdiaz.com/ Tyler Diaz

    Clever technique, only there seems to be a bug whenever I hover over one of the links. I’m using Firefox 2 with Mac Osx – When ever I scroll over to a new li/link there seems to be a jump where the effect bar jumps 2-3 times before getting to where it needs to get.

  • Daniel

    Hi, I have a question,
    What if I have a big word in my menu that will not fit in, like a Publications, or some big word in foreign language, how can I stretch space for button?

  • Atul

    @Daniel
    Well Daniel if you have a big word in your menu you might have to add a special case in the javascript or redo it altogether…
    Now, instead of naming your list items/ buttons b0,b2,b3,b4,b5…. name them b0(for the first button), b50(for the second button), b150(for the second button)and so on….
    Now, 0,50,150 is the distance from the left the image has to move for the first , second and third tab….
    Simply slice out the 0,50 ,150 from the name(id) and your good to go…
    eg.
    $(“#b0px,#b50px,#b150px,#b175px,#b250px,#b345px”)
    .css({backgroundPosition:’0px 0px’}).mouseover(function(){
    var position=$(this).attr(“id”).slice(1,6);
    $(“#sprite”).stop()
    .animate({backgroundPosition:”+position+’px 4px’});
    });
    *Note:
    -Now their is no need for multiplication now
    -There are other ways around this but to keep your javascript small the former mentioned is effective
    -Choose an image which looks good on dynamic widths of your list item/ button

  • The Mafalian

    i saw that effect before,
    thanks

  • http://nikhilopedia.blogspot.com Nikhil

    Hi Atul!
    Great tutorial! I’m thinking of modifying it and using it.. :) But it would have been really nice had you put the download link for all sources.
    Well I’m facing a problem using this effect.I’m using it in ASP.NET application. Specifically, In master page. problem is, once i click on links i have provided, the slider gets reset to left most link because of postback.I got no idea how to fix this! Help..!

  • http://www.webmuch.com Aayush

    Hey Guys,

    We have updated the post with a few tweaks in the jQuery code and the link to the source code has been added at the bottom.

    Hopefully now there will be no problems. If not so, Please comment.

    I have been adding the source code with the previous posts but this was Atul’s first post and he didn’t know about linking to the source code. From now on he’ll be linking when posting.

    Thanks Alot For Reading.

  • http://www.nikhilopedia.blogspot.com Nikhil

    Hey guys thanks a lot for updating the source code and providing the download links :)
    I still have the same problem. :( I guess it is by virtue of ASP.NET postbacks.

  • http://www.nikhilopedia.blogspot.com Nikhil

    Problem solved! :D Had to register a javascript at page load in the code behind simply to find the element by id and then set its className. Had tried doing the same in the page’s aspx itself, but the javascript was giving errors all the time. So tried this approach. May not be the best, just a workaround may be. And of course, the sliding menu is looking impressive! Thanks to webmunch! :)

  • http://learning-online.es/aulavirtual/foro/viewtopic.php?t=122277 Videos Chicas Meando

    hh.. amazing

  • http://www.gmarwaha.com/blog/ Ganeshji Marwaha

    This effect is already available as a jquery plugin called LavaLamp. Check it out at http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

  • Atul

    @Ganeshji Marwaha
    I was not aware that a plugin for this is already available…….

  • Pingback: CSS Brigit | Animated Navigation Bar Using jQuery

  • http://appstime.blogspot.com Vikas

    Awesome… Atlast i leaned something web related.. Now i can implement this.. thnx for such an awesome tutorials.

    Love you guys..!!! keep up

    regards
    Vikas

  • Pingback: All About Drop-down menu – Daily interesting stuffs

  • Pingback: Animated Navigation Bar Using jQuery | AJAX Collection & Research

  • Pingback: Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine

  • Pingback: CaoInteractive Blog | Graphic & Web Design » Blog Archive » Styling HTML Lists with CSS: Techniques and Resources

  • Pingback: Styling HTML Lists with CSS: Techniques and Resources | TheUnical Technologies Blog

  • Pingback: Styling HTML Lists with CSS: Techniques and Resources | Ricardo JV Cruz

  • Pingback: Styling HTML Lists with CSS: Techniques and Resources - Goodfav Howto