LavaLamp
a jQuery animated menu plugin

About the jQuery LavaLamp Plugin

About 2 years ago I was looking for an animated menu plugin for jQuery using the sliding-doors CSS effect, figuring I would write my own if I couldn't find one. During my search I found Ganesh Marwaha's original jQuery 1.1 series LavaLamp plugin based on the work of Guillermo Rauch and his MooTools PowerMenu plugin. It was simple and straightforward - just what I was looking for. After working with it for a few days I wanted more flexibility so I added some features: both horizontal and vertical re-sizing, the ability to set default starting location and a few other customizations.

Since the release of this 'new-and-improved' LavaLamp plugin in March of 2008 I've had hundreds of emails from around the world requesting features and providing bug fixes and patches which I've done my best to apply in the 1.3 releases.

By large the most requests were related to CSS and why certain CSS and HTML markup wasn't working for them with LavaLamp. In response to this, I have written a series of tutorials, with working examples showing how to design the HTML and CSS for a LavaLamp menu from scratch. I also attempt to explain why certain CSS and HTML is needed and how LavaLamp works for some features. Please take a look and let me know what you think.

Many thanks to everyone who came before me on this project!

jQuery LavaLamp Features

Targeting and Container Options

Enhanced target and container options in version 1.3.5 along with the new includeMargins option allows various targeting applications. This allows LavaLamp to play nice with sub-level menus as provided with CMS software like Joomla and Wordpress. Apply the noLava class to sub-element targets you do not want LavaLamp to hover on. LavaLamp is no longer restricted to ul and ol elements since version 1.3.4.

Automatic Default Location

LavaLamp carefully compares the link in the client location bar to the a href within the li elements of the container jQuery LavaLamp was assigned and default the starting location of the hover element to the matching li element. This can be overridden in several ways: with the startItem option, by assigning a selectedLava class to a list item, or by using the Home element feature.

Vertical and Horizontal morphing

Using proper CSS, you can style the hover element to morph based on the destination li element's height and width, simulating a Lava Lamp effect.

Home element

if you define homing options, the .homeLava element is enabled and the hover element will start from that location to produce some unique effects (unless overridden by the startItem option or selectedLava class.)

Other features

• use the returnDelay option to delay the return animation.
• use the click option to define a custom callback function to be run when a menu item is clicked.
• manually add the noLava class to sub-element targets you do not want LavaLamp to attach hover events to.
• supports jQuery noConflict mode.
• accurately calculates destination size including borders.

Version 1.4.1 of LavaLamp has been tested successfully with jQuery versions 2.2.4 and 1.12.4. jQuery version 1.7 or greater is required.

jQuery LavaLamp Options

The following options can also be found at the head of the latest jquery.lavalamp.js file:

target - default: 'li'     new in 1.3.4

defines the elements to target inside the container passed to LavaLamp

Example:

jQuery("div#article").lavaLamp({ target:'p' });

assigns all p within div#article to receive LavaLamp hover events. See target demos for examples.

container - default: ''     new in 1.3.5

DOM element to create for the hover element. If container is empty, LavaLamp will assume it is the same as the target option.

Example:

jQuery("div#article").lavaLamp({ target:'li > a', container:'li' });

assigns all a children of li elements under div#article to receive LavaLamp hover events using an li element as the hover .backLava container. See the new multi-layer demos for examples.

fx - default: 'swing'

selects the easing formula for the animation - requires the jQuery Easing library to be loaded for additional effects

Example:

jQuery("ul.navMenu").lavaLamp({ fx: "easeOutElastic" });

animates the backLava element using the OutElastic formula

speed - default: 500

sets animation speed in milliseconds

Example:

jQuery("ul.navMenu").lavaLamp({ speed: 1000 });

sets the animation speed to one second.

click - default: function() { return true; }

Callback to be executed when the menu item is clicked. The 'event' object and source LI DOM element will be passed in as arguments so you can use them in your function.

Example:

jQuery("ul.navMenu").lavaLamp({ click: function(event, menuItem) { alert(event+el); return false; } });

causes the browser to display an alert message of the variables passed and return false aborts any other click events on child items, including not following any links contained within the target

startItem - default: ''     changed from linum in 1.3.1

specifies the number target element as default, starting with 0 for the first element Used to manually set the default LavaLamp highlight on load.

Example:

jQuery("ul.navMenu").lavaLamp({ startItem: 2 });

selects the third element in the list as default location for backLava

includeMargins - default: false     new in 1.3.5

expands the hover .backLava element to include the margins of the target element. Best used in combination with the target and container options.

Example:

jQuery("ul.navMenu").lavaLamp({ includeMargins: true });

expands the hover .backLava element dimensions to include the margins of all target elements inside ul.navMenu.

autoReturn - default: true     new in 1.3.1

defines whether the backLava hover should return to the last selectedLava element upon mouseleave.

Example:

jQuery("ul.navMenu").lavaLamp({ autoReturn: false });

turns off the autoReturn feature - backLava element will stay on the last element that you hovered over.

returnDelay - default: 0     new in 1.3.1

how many milliseconds to wait before returning the backLava element to the last selected element. Only works if autoReturn is set to true (default setting)

Example:

jQuery("ul.navMenu").lavaLamp({ returnDelay: 1000 });

waits one second after mouseleave event before returning to the last selected element.

setOnClick - default: true     new in 1.3.1

defines whether a clicked element should receive the selectLava class and become the most recently selected element

Example:

jQuery("ul.navMenu").lavaLamp({ setOnClick:false });

disables selecting of elements once clicked - after you leave the parent list element the backLava will return to the original default element the page was loaded with.

homeTop - default: 0, homeLeft - default: 0, homeHeight - default: 0, homeWidth - default: 0     new in 1.3.1

allows you to define an independent 'home' element where the backLava defaults to or can be sent to. This can be used to define a unique starting and/or resting place for the backLava upon leaving the parent element.

Example:

jQuery("ul.navMenu").lavaLamp({ homeTop:-100, homeLeft:0, homeHeight:20, homeWidth:600 });

creates a home element 100 pixels above the parent container with a height of 20px and width of 600px. If the parent element has CSS of overflow:hidden, this can provide an interesting fly-in effect

returnHome - default:false     new in 1.3.1

adjusts behavior of the backLava element when the the mouse leaves the parent container. the default behavior of 'false' causes the backLava element to stay on the active menu items after it is first triggered. this feature respects the returnDelay parameter, if set. this feature overrides the autoReturn parameter.

Example:

jQuery("ul.navMenu").lavaLamp({ returnHome:true });

causes the backLava element to always return to the homeLava position after mouse leaves the parent container. this can be manually triggered by running the command jQuery("ul.navMenu").mouseover();

autoResize - default:false     new in 1.3.1

triggers the selectedLava mouseenter event when the window is resized. Setting autoResize to true causes the backLava element to reposition and change dimensions if the resizing the screen changes the shape of the LavaLamp. autoResize is best used with the target option. Default is false for efficiency as this feature is new and seldom used.

Example:

jQuery('div#articles').lavaLamp({target:'p',autoSize:true});

causes the backLava element to resize and reposition to the p.selectedLava position and dimensions when the window resizes. See target demo for example.

jQuery LavaLamp Tips

• Learn about CSS element positioning: A great place to start is w3Schools.com CSS Positioning. Also, be sure to peruse PositionIsEverything.net and QuirksMode.org for the details on cross-browser compatibility and quirks.
• Use a debugging plugin: like FireBug for Firefox or if using Chrome or Safari/Webkit right-click on a page and choose 'Inspect Element' from the pop-up menu. This will help you see how you have set your margins and other CSS, allowing you to experiment in realtime until you get it right to put in your CSS files.
• Experiment: Try out small changes with the demo packages on your own until you get the hang of styling the various elements and experiment with different parent/target element arrangements.

Where do I get it? Download jQuery LavaLamp menu plugin