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!
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.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.li element's height and width, simulating a Lava Lamp effect..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.)returnDelay option to delay the return animation.click option to define a custom callback function to be run when a menu item is clicked.noLava class to sub-element targets you do not want LavaLamp to attach hover events to.noConflict mode.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.
The following options can also be found at the head of the latest jquery.lavalamp.js file:
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.
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.
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
sets animation speed in milliseconds
Example:
jQuery("ul.navMenu").lavaLamp({ speed: 1000 });
sets the animation speed to one second.
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
linum in 1.3.1specifies 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
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.
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.
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.
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.
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
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();
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.
Where do I get it? Download jQuery LavaLamp menu plugin