JQuery is a great javascript platform that developers can use to add spice to their pages. Lavalamp was originally created for mootools and was converted over by Ganesh.

First, get the JQuery, Lavalamp and Easing libraries

(55.9kb) jquery-1.3.2.min.js (Click to download)
(4kb) jquery.easing.1.1.js (Click to download)
(4kb) jquery.lavalamp.js (Click to download)

 

 

Step 1:

Insert these files into the head tags on your page:

?View Code JAVASCRIPT
1
2
3

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

 

Step 2:

Now add this to the head of your page as well:

?View Code JAVASCRIPT
1
2
3

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

 

Step 3:

Now were going to start inserting the html and css. Lets start by adding the menu itself, then add in the finishing touches. Now, put this where you want your menu to appear:

?View Code HTML
1
2
3
4
5
6

        <ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
        </ul>

 

Step 4:

Now open your stylesheet and add this css. Remember, this is where you can create the look and feel of your nav.

This example uses two images, you can have them both here: lavabg.gif and lava.gif.

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/lavabg.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;
        }

 

Now you should have a working menu that will give your site an edge while looking great! This also shows how JQuery can really compete with flash, while being very lightweight.