I will present in this article an example for how to create a menu with Lava Lamp jQuery .
Code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Lava Lamp Menu Tutorial</title>
<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 () {
//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($('#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();
$('#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
$('#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});
});
});
</script>
</head>
<body>
<div id="container">
<div id="lava">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li class="selected"><a href="#">About Us</a></li>
<li class="selected"><a href="#">Contact</a></li>
</ul>
<!-- If you want to make it even simpler, you can append these html using jquery -->
<div id="box"><div class="head"></div></div>
</div>
</div>
</body>
</html>
Code CSS :
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
background:#343434 url('images/background.jpg') repeat-x;
text-align:center;
}
a {
text-decoration:none;
color:white;
font-weight:bold;
}
#lava {
/* you must set it to relative, so that you can use absolute position for children elements */
position:relative;
text-align:center;
width:583px;
height:40px;
}
#lava ul {
/* remove the list style and spaces*/
margin:0;
padding:0;
list-style:none;
display:inline;
/* position absolute so that z-index can be defined */
position:absolute;
/* center the menu, depend on the width of you menu*/
left:110px;
top:10px;
/* should be higher than #box */
z-index:100;
}
#lava ul li {
/* give some spaces between the list items */
margin:0 18px;
/* display the list item in single row */
float:left;
}
#lava #box {
/* position absolute so that z-index can be defined and able to move this item using javascript */
position:absolute;
left:0;
top:0;
/* should be lower than the list menu */
z-index:50;
/* image of the right rounded corner */
background:url(images/pink/tail.jpg) no-repeat right center;
height:40px;
/* add padding 8px so that the tail would appear */
padding-right:18px;
/* self-adjust negative margin to make sure the box display in the center of the item */
margin-left:-15px;
}
#lava #box .head {
/* image of the left rounded corner */
background:url(images/pink/head.jpg) no-repeat 0 0;
height:40px;
/* self-adjust left padding to make sure the box display in the center of the item */
padding-left:10px;
}
#container {
text-align:left;
width:583px;
margin:0 auto;
}