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:
[html]</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>
[/html]
CSS Code:
[css] 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;
}
[/css]
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.