How to Build jQuery Lava Lamp Menu Tabs
Click Here to See This Tutorial’s Example Demo
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
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/typebased/images/rounder.gif" /></div>
<div id="tr"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
<div id="bl"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
<div id="br"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
</div>
</li>
</ul>
</div>
</body>
</html>
@cartoonist and @Arjan van der Wal,
I am unable to duplicate the error you two are getting. Taking the completed code from the tutorial here and running it local on chrome, IE7 and IE8 I get no errors or issues.. I do not want to have this floating around if there is indeed an issue I cant reproduce.. Would one of you please use http://www.screentoaster.com and show me the error / browser versions you get?
Thanks.
Hi,
Thanks for code!
I have the same error as “Arjan van der Wal” said. In Google Chrome I have background error too! :(
Does Google Chrome have incompatibility with jQuery or sth like this?
Thanks!
Great video, very helpful for beginners!
I have linked you on my revamped jQuery LavaLamp Plugin page as a help for visitors, I hope that’s okay.
http://nixboxdesigns.com/projects/jquery-lavalamp/
Peace -Jt
hello,
tnx for sharing this code! ;-)
but dr is one bug in the code :(
in internet explorer 8 he gives an error.
and in google chrome it cause an background error. You can fix when you use an image en let it repeat. But in internet explorer 8 the menu will crash.
Does anyone have the same error as me and fixed it?
greetz
arjan
Your tutorials and examples are FANTASTIC !! Thank you for sharing your talent and expertise !!
I always enjoy feedback from my readers!