LavaLamp - a jQuery animated menu plugin
LavaLamp is a plugin based on Guillermo Rauch and Ganesh Marwaha's previous plugins for mootools and jQuery 1.1.x respectively. Using the Sliding Doors CSS / Javascript technique, LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.
New in 1.3.3 requires jQuery 1.3.2
- fixed: added closure with null passed argument for move() command in
returnDelay to fix errors some were seeing - thanks to Michel and
Richard for noticing this.
- fixed: changed mouseover/out events to mouseenter/leave to fix jerky/stuttering animation
problem when using large margins on LI elements. Thanks to Thomas for the solution
and Chris for clearly demonstrating the problem.
- enhanced: New! Multi-layered Menu support - added 'noLava' class detection to prevent LavaLamp effect on LI elements with this class. See the demo page for details (at the bottom.) This fix bumps the requirement to jQuery 1.3.2
- enhanced: modified to better automatically find default location for
relative links. Thanks to Harold for testing and finding this bug.
New in 1.3.2
- patched to remove stray $ references inside plugin to work correctly with jQuery.noConflict() mode.
New in 1.3.1
- verified for use with jQuery 1.3 - should still work with 1.2.x series
- changed linum parameter to startItem for clarity
- improved slide-in accuracy for .back elements with borders
- changed .current class to .selectedLava for clarity and improved support
- appended 'Lava' to all internal class names to avoid conflicts
- full support for jQuery.noConflict() mode
- performance improvements
new options:
- autoReturn: true - if set to false, hover will not return to last selected
item upon list mouseout.
- returnDelay: 0 - if set, will delay auto-return feature specified # of
milliseconds.
- setOnClick: true - if set to false, hover will return to default element
regardless of click event.
- homeLeft: 0, homeTop: 0 - if either set to non zero value, absolute
positioned li element with class .home is
prepended to list for homing feature.
- homeWidth: 0, homeHeight: 0 - if set, are used for creation of li.home
element.
- returnHome: false - if set along with homeLeft or homeTop, lavalamp hover
will always return to li.home after click.
Important Notes for 1.3.1 update:
- two big changes were made to the internals that may affect upgrading to this version. make sure to update your CSS class names and change linum to startItem when you upgrade!
- a bug in the first few versions with the linum parameter created a nifty out-of-bounds fly in effect that several people requested as a feature, so the home features are born!
- known issue: IE may throw an error if using an out-of-bounds home with too small height and width - this is being investigated here: http://dev.jquery.com/ticket/3881
New in 1.3
- New default routine automagically attempts to match the location bar info to the appropriate link href tag for the active page - this should prevent need to use linum/startItem in most situations
- click method now returns true by default, allowing link follow
- cleaned up the original code for readability and efficiency
Notes for this version:
- The demo page is now entirely html/jQuery powered.
1.2 and earlier features include:
- both horizontal and vertical movement and stretching
- customizable LI element selection
- custom call back on completion
- easing library support
- speed adjust
Many thanks to everyone who came before me on this project!
LavaLamp Demo Page
Download jquery.lavalamp.1.3.3.js full js with comments and documentation
jquery.lavalamp.1.3.3-min.js minified js
Download LavaLamp 1.3.3 package includes all test files with full and minified versions
Have fun! ~ Jolyon
Got a question?
copyright (c) 2008, 2009 Jolyon Terwilliger - Nixbox Web Designs