$(document).ready(function () {  
     
     

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