$(document).ready(function () {  
      
        //transitions  
        //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/  
        var style = 'swing';  
          
        //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: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  
           $('#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:1500, easing: style});     
           $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});          
             
       });  
         
   });  // JavaScript Document