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 only has a .js file in addition to the jQuery library. Optionally, you can include the easing plugin for animations.
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Optional: Include the easing plugin -->
<script type="text/javascript" src="js/jquery.easing.1.3.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;
}