陈斌彬的技术博客

Stay foolish,stay hungry

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 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;
}

Resource Reference