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. This is a custom application, with a separate li element to contain the sub list.
  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, etcetera. This embeds the sub-ul container in the same li as the parent li. This seems to be how 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.
  3. Using target, container and includeMargins for custom hover effects. Uses the same HTML format as #2.

noLava class example,
using separate li for sub-menus

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

Wordpress/Joomla example

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

Wordpress/Joomla example
+ includeMargins

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

Auto Homing Demo

Lavalamp has a newly modified algorithm which automatically places the LavaLamp hover over on the appropriate link in your menu given the current location address. See the Automatic start location demos.

return to the jQuery LavaLamp Demos Page