jQuery Lavalamp Guide

The jQuery lavalamp navigation is really cool and simple to implement onto your website. Check out our hover buttons above to get a feel for how they look. Just follow the step by step guide below to create your own:

Stage 1: Creating the HTML

Open a blank html document and insert the following code:

<ul class=”lavaLamp”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Page 1</a></li>

<li><a href=”#”>Page 2</a></li>

<li><a href=”#”>Page 3</a></li>

</ul>

Stage 2: Inserting the CSS styling

Create a new CSS document and link it from the <head> section of your html sheet e.g. <link href=”stylesheet.css” rel=”stylesheet” type=”text/css” />

/* Styles for the entire LavaLamp menu */

.lavaLamp {

position: relative;

height: 29px; width: 421px;

background: url(”../image/bg.gif”) no-repeat top;

padding: 15px; margin: 10px 0;

overflow: hidden;

}

/* Force the list to flow horizontally */

.lavaLamp li {

float: left;

list-style: none;

}

/* Represents the background of the highlighted menu-item. */

.lavaLamp li.back {

background: url(”../image/lava.gif”) no-repeat right -30px;

width: 9px; height: 30px;

z-index: 8;

position: absolute;

}

.lavaLamp li.back .left {

background: url(”../image/lava.gif”) no-repeat top left;

height: 30px;

margin-right: 9px;

}

/* Styles for each menu-item. */

.lavaLamp li a {

position: relative; overflow: hidden;

text-decoration: none;

text-transform: uppercase;

font: bold 14px arial;

color: #fff; outline: none;

text-align: center;

height: 30px; top: 7px;

z-index: 10; letter-spacing: 0;

float: left; display: block;

margin: auto 10px;

}

Stage Three: Attach the Javascript code

Insert the following code into the <head> section of your html document:

<script type=”text/javascript” src=”scripts/jquery.standard.js”></script>

<script type=”text/javascript” src=”scripts/jquery.easing.js”></script>

<script type=”text/javascript” src=”scripts/jquery.lavalamp.js”></script>

<script type=”text/javascript”>

$(function() { $(”.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })});

</script>

Now all you need to do is download the three Javascript files and save them a folder named ‘Scripts’ in the root level of your website. Here are the files; jQuery Standard, jQuery Lavalamp, jQuery Easing. Enjoy!

Design and Development | Chris | January 24, 2010 10:28 am

1 Comment

By Sarah Harwals, March 13, 2010 @ 4:14 am

Hey I did the script and its not working unfortunately but thats. u did a nice job.. thanks again