How do I make a menu like this:...

[MOD YOU UPP]

Hi

I found a website that has an awesome link highlighter thing, but I can't quite understand how they did it. I'm 99% sure its javascript, but I could be wrong. Here is the website: http://www.sosfactory.com/web-design/amazium/
The part I want to emulate is the links in the top right. When you mouse over it the highlight bounces to the link you hover over. I tried looking at the code and here is what it says:

<!--/header -->
<div id="header">
    	<h1><a href="index.html">AMAZIUM: IT and Management Consulting</a></h1>
        <div id="lava">
          <ul>

            <li class="selected"><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">Contact</a></li>		
          </ul>
          <div id="box"><div class="head"></div></div>

      </div>  
</div>

I found the CSS file it is referencing, and I believe the LAVA part has something to do with the effect. Here it is:

/*=== Header ===*/

#header {
	background: #e0d6c8 url(../images/body-bg.gif) repeat-y center ;
	height: 125px;
	margin: 0 auto;
	width: 963px;
	}
		
	#header h1 a {
		background: url(../images/header-logo.png) no-repeat top left;
		display: block;
		width: 343px;
		height: 125px;
		text-indent: -9999px;
		float: left;
		cursor: pointer;
		}

#lava {
	position:relative;
	text-align:center;
	width:450px;
	height:35px;
	float: right;
	margin: 65px 19px 0 0;
	font-weight: bold;
	}
	
	#lava ul {
		margin:0;
		padding:0;
		list-style:none;
		display:inline;
		position:absolute;
		top:1px;
		z-index:100;
		right: 0px;
		}
	
		#lava li {
			margin:0 15px; 
			float:left;
			}
		
			#lava a, #lava a:visited {
				color: #464646;
				text-decoration: none;
				display: block;
				font-size: 15px;
				}
			
			#lava a:hover {color: #fff;}

	#lava #box {
		position:absolute; 
		left:0; 
		top:0; 
		z-index:50; 
		background:url(../images/tail.gif) no-repeat right center; 
		height:20px;
		padding-right:8px;
		margin:1px 0 0 -10px;
		}
		
	#lava #box .head {
		background:url(../images/head.gif) no-repeat 0 0;
		height:20px;
		padding-left:10px;
		}

Anyone have any ideas about how to do this? Here is a link to the css file:
http://www.sosfactory.com/web-design...css/styles.css

Also, there is a folder called js that has a few scripts but I'm not sure what they do. Here's the link:
http://www.sosfactory.com/web-design/amazium/js/


Any help is greatly appreciated!

[Dean440]

This is jQuery, a very popular JavaScript library. The function that does it is called .animate(), which has an "easing" parameter, which refers to the manner in which an object animates: for instance, it can move linearly, bounce, move with parabolic curves, etc.

PHP Code:

<!-- lavalamp -->  
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>    
<script type="text/javascript"> 
    $(document).ready(function () {
        var style = 'easeOutElastic';
        var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
        var default_width = $('#lava li.selected').width();
        $('#box').css({left: default_left});
        $('#box .head').css({width: default_width});
        $('#lava li').hover(function () {
            left = Math.round($(this).offset().left - $('#lava').offset().left);
            width = $(this).width(); 
        $('#debug').html(left);
            $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});    
            $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});    
        }).click(function () {
            $('#lava li').removeClass('selected');    
            $(this).addClass('selected');
        });
        $('#lava').mouseleave(function () {
            default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
            default_width = $('#lava li.selected').width();
            $('#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>