How to Build a jQuery Lava Lamp Menu
Example:
How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.
This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!
We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
The Video Tutorial:
Here is the full source if you want to just get down to studying the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devin R. Olsen - Lava Lamp Menu Tabs</title>
<style type="text/css">
#nav {width:500px; background:#333; margin:0px; padding:0px 0px 0px 20px; color:#fff; position:relative;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; font-size:12px; display:inline; color:#fff;}
#nav li.rounder { position:absolute; left:0px; top:0px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#fff;}
#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}
#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}
#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}
#tr,#br {right:0px;}
#tl,#bl {left:0px;}
#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li a").mouseover(function(){
$("#nav li a").each(function(count){
$(this).css({color:"#fff"});
});
$(this).css({color:"#000"});
var offL = $(this).offset().left - $("#nav").offset().left;
var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;
$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){
//IE6 1px Fix
var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));
var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));
if(wrapWOff > trOff){
$("#tr,#br").attr("class","rFix");
}
$(".rFix").css({right:"-1px"});
if(wrapHOff > brOff){
$("#br,#bl").attr("class","bFix");
}
$(".bFix").css({bottom:"-1px"});
});
});
});
</script>
</head>
<body>
<div>
<ul id="nav">
<li><a href="#">Short</a></li>
<li><a href="#">Longer</a></li>
<li><a href="#">Kinda Long</a></li>
<li><a href="#">Kinda Longer</a></li>
<li><a href="#">Really Longer</a></li>
<li><a href="#">A Really Lot Longer</a></li>
<li class="rounder">
<div class="cornersWrap">
<div id="tl"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
<div id="tr"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
<div id="bl"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
<div id="br"><img src="http://www.devinrolsen.com/wp-content/themes/dolsen/images/rounder.gif" /></div>
</div>
</li>
</ul>
</div>
</body>
</html>
About Author:
I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.
Follow Me:
