jQuery LavaLamp Demos - a jQuery animated menu plugin

Choose an Easing Style for all demos

jQuery LavaLamp Demos Page

ReturnHome - 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.

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

startItem demo - Ease Out -

setting startItem: 1 defaults to the 2nd menu element upon page load; menu arrays start with index of 0.

$("#bgImageStartItemDemo").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, or returnDelay + speed. Because of this, the timing is not perfect with this method.

$('#returnDelayDemo').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.

$("#clickVerticalDemo").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

$('#baseBallImageDemo').lavaLamp({
	fx: 'easeInOut',
	speed: 1000,
	autoReturn: false
});
Click to Return to last selected $('#baseBallImageDemo 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 to work.

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

multi-layer menu demos - Ease In -

Demonstrating multi-layer menu support.

Examples:

  1. Using noLava class to skip highlighting applicable elements. The first example the 'Anchovies' list item is set with the 'noLava' class. A sub-list is contained within the list-item as a demonstration that the sub-list li elements still respond to the hover events.
  2. Using target and container options to target sub-elements for hover effect. Be sure to use the appropriate container to match the parent container; li elements for ul or ol parents, dd or dt elements for dl parents, p or div for div parents, span for p parents, et cetera. This embeds the sub-ul container in the same li as the parent li. This seems to be how most CMS software like Wordpress and Joomla are creating their menus, so we must target and style the link sub-element to float the hover correctly also using includeMargins to demonstrate effect.

noLava class example,
using embedded ul Anchovies sub-list

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

Wordpress/Joomla example
+ includeMargins

$('#multiLayerDemo').lavaLamp({
	target: 'li > a',
	container: 'li',
	includeMargins: true,
	fx: 'easeIn',
	speed: 500
});
 

Callback Method Demo

uses dl (definition list) and dd sub-elements as lavaLamp hover containers, but targets the a element within for each hover element.

four callbacks are enabled which output the time of each action fired at the beginning of the the preceeding logging div. 
	$('#callbackDemo').lavaLamp({
		target: 'dd > a',
		container: 'dd,
		fx: 'easeIn',
		speed: 500,
		hoverStart: function() {
			var time = new Date();
			var timestring = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()+'.'+time.getMilliseconds();
			$('#callbackLog').prepend('<p>Hover START to target at '+timestring+'</p>');
		},
		hoverFinish: function() {
			var time = new Date();
			var timestring = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()+'.'+time.getMilliseconds();
			$('#callbackLog').prepend('<p>Hover FINISH to target at '+timestring+'</p>');
		},
		returnStart: function() {
			var time = new Date();
			var timestring = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()+'.'+time.getMilliseconds();
			$('#callbackLog').prepend('<p>Return START to home at '+timestring+'</p>');
		},
		returnFinish: function() {
			var time = new Date();
			var timestring = time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()+'.'+time.getMilliseconds();
			$('#callbackLog').prepend('<p>Return FINISH to home at '+timestring+'</p>');
		}
	});
It's your vacation!

What to do today?

Long Hike, hit a 4k!
Short Hike, the Flume is nice..
Take the boy to Clark's
Drink beer and watch the river.. why not?
 

Auto Homing Demo

Lavalamp will attempt automatically place the LavaLamp hover on the appropriate link in your list or menu given the current address in the location bar, including the hash tag. See the Automatic start location demos for details and examples.

return to the jQuery LavaLamp Demos Page