jQuery LavaLamp Demos - a jQuery animated menu plugin

Choose an Easing Style for all demos

download LavaLamp for jQuery

Classic Spaceship Demo - introducing returnHome and homing features - Ease In -

returnHome is set to false by default, this keeps the lavalamp where you last clicked. The absolute home position (in relation to the parent UL) and size is set up via homeLeft, homeTop, homeWidth and homeHeight. Clicking the link below the menu will tell the lavalamp to move back to the home position, but does not change the selectedLava class.

$('#lavaLampClassic').lavaLamp({
	fx: 'easeIn',
	speed: 800,
	homeTop:-1,
	homeLeft:-1
});
ET, go home! $('#lavaLampClassic li.homeLava').mouseover()

startItem demo - Ease Out -

setting startItem:1 defaults to the 2nd menu element upon page load ( menu arrays start with index 0 )

$("#lavaLampVariableImage").lavaLamp({
	fx: 'easeOut',
	speed: 800,
	startItem: 1
});

returnDelay demo - Ease In/Out -

returnDelay is set to 1000 milliseconds ( 1 second ): the returnDelay starts counting down after the last move animation is completed. (returnDelay + speed) The timing is not 100% accurate on this method, especially after mouseout on the parent UL.

$('#lavaLampBorderOnly').lavaLamp({
	fx: 'easeInOut',
	speed: 1000,
	returnDelay:1000
});

click & setOnClick:false demo - Ease Out -

the click function just returns false: links will not activate when clicked (watch your address bar for verification) setOnClick is set to false, so clicking will not set new element as default return.

$("#lavaLampVertical").lavaLamp({
	fx: 'easeOut',
	speed: 1000,
	click: function() {return false;},
	setOnClick: false
});

autoReturn:false demo - Ease In/Out -

autoReturn is set to false: whatever menu item the mouse pointer was last over keeps the hover

$('#lavaLampFun').lavaLamp({
	fx: 'easeInOut',
	speed: 1000,
	autoReturn: false
});
Click to Return to last selected $('#lavaLampFun li.selectedLava').mouseover()

returnHome and homing demo - Ease In -

returnHome is true, telling lavalamp to return to the home position, even if a menu item is clicked. homeLeft, homeTop, homeWidth and homeHeight settings create the appropriate starting point, which is a shape larger than the parent UL for effect (overflow:hidden on UL is necessary CSS for this effect).

$('#lavaLampHome').lavaLamp({
	fx: 'easeIn',
	speed: 1000,
	returnHome:true,
	homeLeft: -100,
	homeTop: -25,
	homeWidth:700,
	homeHeight:10
});

multi-layer menu demo - Ease In -

demonstrating new multi-layer menu support and 'noLava' class de-selector - a major request! To use: add a class of 'noLava' to the LI elements for LavaLamp to ignore; sub-LI elements will be respected. Please view the HTML for this method to use properly.

$('#lavaLampHome').lavaLamp({
	fx: 'easeIn',
	speed: 500
});

Auto Homing Demo

Lavalamp 1.3.3 features a newly modified algorithm to attempt to automatically place the LavaLamp on the appropriate link, and it has recently been modified to work with relative links (without preceding hostname or forward slashes). View the Auto Homing demo here

download LavaLamp for jQuery

copyright (c) 2008, 2009 Jolyon Terwilliger / Nixbox Web Designs

feel free to reuse this code anyway you see fit in your own projects, understanding that you assume all responsibility upon usage.