Menu jQuery Background Animation

In this tutorial i will show how to animate the background of the menu with jQuery, CSS, and HTML. For the best view trying in the newer browsers!

In the head section create the links with scripts and css file! 

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" />

Then put this script! 

<script type="text/javascript">

$(document).ready(function () {

//transitions

var style = 'easeOutElastic';

//Retrieve the selected item position and width

var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

var default_width = $('#menu li.selected').width();

//Set the floating bar position and width

$('#box').css({left: default_left});

$('#box .head').css({width: default_width});

//if mouseover the menu item

$('#menu li').hover(function () {

//Get the position and width of the menu item

left = Math.round($(this).offset().left - $('#menu').offset().left);

width = $(this).width(); 

$('#debug').html(left);

//Set the floating bar position, width and transition

$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});

$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});

//if user click on the menu

}).click(function () {

//reset the selected item

$('#menu li').removeClass('selected');

//select the current item

$(this).addClass('selected');

});

//If the mouse leave the menu, reset the floating bar to the selected item

$('#menu').mouseleave(function () {

//Retrieve the selected item position and width

default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

default_width = $('#menu li.selected').width();

//Set the floating bar position, width and transition

$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});

$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});

});

});

</script>

In hatml page, in the body section create the buttons:

<div id="container">

<div id="menu">

<ul>

<li class="selected"><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Gallery</a></li>

        <li><a href="#">Portofolio</a></li>

<li><a href="#">Contact</a></li>

</ul>

  <div id="box"><div class="head"></div></div>

</div>

</div> 

Now, create a css file with style.css name:

body {

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 

font-size:18px; 

background:#c8cdd1 url(bg.png) top center no-repeat;

margin:0;

}

#container {

width:100%;

margin:0 auto;

}

a {

text-decoration:none; 

color:#fff;

outline:none;

text-shadow: #000 1px 1px 1px;

}

#menu {

position:absolute; 

background:url(bg_menu.png) repeat-x; 

text-align:center; 

width:100%; 

height:50px;

margin-top:30px;

}

#menu ul {

margin:0; 

padding:0; 

list-style:none; 

display:inline;

position:absolute; 

left:110px; 

top:0; 

z-index:100;

}

#menu ul li {

margin:12px 15px; 

float:left;

}

#menu #box {

position:absolute; 

left:0; 

top:0; 

z-index:50; 

     height:40px;

padding-right:8px;

margin-left:-10px;

}

#menu #box .head {

background:#318CE7 no-repeat 0 0;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

-webkit-box-shadow: 2px 2px 2px #000;

-moz-box-shadow: 2px 2px 2px #000;

box-shadow: 0px 2px 2px 2px #000;

height:40px;

padding-left:10px;

padding-right:10px;

margin-top:5px;

}

The last step is to download the jQuery scripts!