Welcome to Lava Lamp

Lava Lamp is an animating navigation plugin for jQuery. It creates an object that slides to your currently hovered item.

How to install

1. Link files

Lava Lamp has a .js and .css file in addition to the jQuery library. All its animations are done with CSS3 transitions, so you can use or modify the advanced transition-timing-function to create custom easing.


<!-- Include the stylesheet -->
<link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />

<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- Include the lava lamp plugin -->
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>

2. Create HTML

Create a container for the slider and children for the panels. Remember to add a default active element.


<ul id="navlist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/programs.html">Programs</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

3. Call the plugin

Call the lava lamp plugin after the HTML markup.

$('#navlist').lavalamp({
    easing: 'easeOutBack'
});

4. Style it

The plugin creates a div with the "lavalamp-object" class in the container. This object stretches with the width and height of the element that you're hovering over.

.lavalamp-object {
	background-color:#ccc;
}