$(document).ready(function () {

//transitions
//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
var style = 'easeOutCirc';
//Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
var default_width = $('#lava 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
$('#lava li').hover(function () {
//Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width(); 
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});	
$('#box .head').stop(false, true).animate({width:width},{duration:500, easing: style});	
//if user click on the menu
}).click(function () {
//reset the selected item
$('#lava li').removeClass('selected');	
//select the current item
$(this).addClass('selected');
});
//If the mouse leave the menu, reset the floating bar to the selected item
$('#lava').mouseleave(function () {
//Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: default_left},{duration:300, easing: style});	
$('#box .head').stop(false, true).animate({width:default_width},{duration:300, easing: style});		

});

	});