Lavalamp sliding navigation menu

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
4
5
6
7
8
9
10
<script type="text/javascript">
    //Active link functionality using Javascript (thanks to Neha.S). Alternatively, you can use your favorite code to apply the class 'active' to the active page.
       var loc = window.location.href;
       var filename = loc.substring(loc.lastIndexOf('/') + 1, loc.length);
       $("#1 a").removeClass("current");
       $("#1 a[href*='" + decodeURIComponent(filename.replace(/\+/g, " ")) + "']").parent().addClass("current");
 
    //Call Lavalamp, Also assign properties
    $(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:

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.

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.

 
 

39 Users Responded in " Lavalamp sliding navigation menu "

Aaron said,  

I tried this example and everything works great. Except when I add real links. When I click a link it is no longer selected. The selection defaults to the Home button. How can I change this to where the link selected will be active depending on which link I click on?

Thanks in advanced.

Brandon said,  

@Aaron
The reason why this is happening is because each time the page reloads, it will also reload the menu. So, you’ll want to add the “current” style to which nav item you want to be “selected” on a given page, like this:

<li class="current">
<a href="http://www.2mellow.com">Home</a>
</li>
Aaron said,  

Thanks for the response. I understand that a class would need to be added, but is there a way to make the class dynamic depending on which tab is selected so more than one header wouldn’t need to be created?

I’ve been trying to figure this out, and for some reason, it’s pretty difficult to find an example of this online. If you know of any resources I may not be aware of for this I would love to know!

Brandon said,  

Yes, and it would be to use additional code (this capability is not built into lavalamp and I don’t really think it could be, because each website would be different). There would be many ways to do this, the easiest would be using php. The php code for this would vary greatly depending on how your back-end is setup (if one at all). Are you using a popular back-end system? Generally, this type of functionality is already built in.

vineet said,  

hello
i have downloaded Lavalamp sliding navigation menu from http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

I have encountered a problem when placing a url in the href in the menu list of demo.html

It does not open any url. Can some1 explain to why?thanks for ur help

Brandon said,  

Greetings Vineet,

Please look at step2 of this tutorial. It should be similar to the one you downloaded. Either use my code in step2, or look for a “return: false;”. Remove that, and it should work great.

bob said,  

step 2 will fix it perfectly.

andrew said,  

Ok, probably a really stupid question but here goes. I am using your awesome script and the way that I have my new website set up is using the pagescroll technique. I am not very good with javascript as of yet although I seem to have gotten everything with your script set up ok. I used the “current” value to place the “box” over the cooresponding link based upon what “page” we are at (I have several navigation menus within the site). But because all of the “pages” are actually just anchors, when I go to my profile “page”, the box is over the correct link but when I go from that page back to the home “page”, the box there is still over the profile link. And at that point, if I were to go back to the profile “page” then the box is now positioned over the home link. So basically what I am trying to accomplish, is after one clicks on the “page” they want to go to, the box always goes back to the link with the “current” class applied. Does that make sense? lol.

Here’s a link so you can see what I mean:

http://www.ideologydesign.com/new/

Thanks bro!

Brandon said,  

Andrew,

You’ll probably want to send an ajax request after a click to reset the “current” value.

Cheers,

Brandon

nadim said,  

This is nice but it have some limite.bcz its not wors on internet Explorer 6.very sad.wish fix that problem very soon.

loganf said,  

Very nice code. I used it on a wordpress theme I am currently developing. Way to go man.

Marcus said,  

Hi!
I´m using the Lavalamp sliding menu on the same page as a jCarousel but it dont work together. When I´m not loading the “jquery.easing.min.js” the Carousel works but not the animation in the menu. Why is there a conflict? And what can I do to solve the problem?

You can view the page here, http://www.yatzy.se/om

eddie said,  

am i the only one that is having cross-browser issues? I installed the standard orange lavalamp and in IE everything is fine. Newer versions of Firefox however makes a right mess of it… Anybody had the same experience?

jkief said,  

Is there a way to have the “current” font color different, yet have it change to another color when the menu is being used? Like, once the background moves to another link, the “current” link changes color.

xtraklaus said,  

I have integrated this menu in Typo3. You want to know how to do it? Ask me at xtraklaus@arcor.de

free font said,  

thank you for sharing.
much appreciated :D

Santosh Maharjan said,  

@vineet Comment out return false;. It works.

EG:

$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
// return false;
}
});
});

Mohd said,  

Heloo Brandon Fredericksen,

First of all I would like to thank you for spending your time to share this wonderful information, which helps beginers like me..

I did not understand, How to create current active class for the below css and html. I would be very thankful If you could do so..

//CSS//
.lavaLamp {
position: relative;
height: 36px;
width: 740px;
padding:4px 0 0 0;
margin: 0;
overflow: hidden;
}
.lavaLamp li {
float: left;
list-style: none;
}
.lavaLamp li.back {
width: 9px;
height: 36px;
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(“”);
z-index: 8;
position: absolute;
}
.lavaLamp li a {
height: 36px;
float: left;
color: #fff;
margin: auto 10px;
font: bold 15px cursive;
text-align: center;
text-decoration: none;
outline: none;
top: 6px;
letter-spacing: 0;
z-index: 10;
display: block;
position: relative;
overflow: hidden;
}
.lavaLamp li a:hover, .lavaLamp li a:active, .lavaLamp li a:visited {
border: none;
}

//HTML//

Home
About
Archive
Lab
Reviews
Contact

Mohd said,  

//HTML//

Home
About

this is my site… you can see the view here…

Thank you in Advance.

Brandon said,  

Mohd,

You need to use PHP to identify the “current” page. Something similar to this (this is just one way to do this, there are many ways) …

URL defines the variable ‘$page’: http://www.yoursite.com/index.php?page=home

//get the variable page
$current = $_GET['page'];

//is the Home page set? if so, set li class to current.
if ($current == "Home"){
<li class="current">
<a href="http://www.2mellow.com" rel="nofollow">Home</a>
</li>
} else {
<li>
<a href="http://www.2mellow.com" rel="nofollow">Home</a>
</li>
}

Megan said,  

Is there a way to turn the hover off if a user is on a sub page of one of the navigation bar pages?

VicTheme said,  

Thanks for sharing…
I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
if it’s Okay and welcome for any review or comments:)

Brandon said,  

@Megan: You would need to use PHP for this as well. You’ll make an IF statement to determine if the page has a Parent ID. If it does, add a css class to the menu. In that class, use a different BG image with no hover, but with everything else the same.

Singh said,  

i am having a problem with links set up in a asp module that do not recognize the current link and therefore the slider does not stay under the active menu link. Could you help me with this?

Thank you in advance.

Brandon said,  

Singh, Please look in the above comments. The answer is there!

I’ll put this into the actual article, as I get tons of questions about this.

Neha.S said,  

I think there is solution to the active link problem here:-
http://forums.asp.net/p/1673629/4386821.aspx/1?Lavalamp+is+not+working+after+postbac

one just need to add a few lines in the script as under:-

$(function() {

var loc = window.location.href;
var filename = loc.substring(loc.lastIndexOf(‘/’) + 1, loc.length);
$(“#1 a”).removeClass(“current”);
$(“#1 a[href*='" + decodeURIComponent(filename.replace(/\+/g, " ")) + "']“).parent().addClass(“current”);

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

kart said,  

Brandon : – )

Thank you man. You’ve just solved my problem. I had the same problem that Aaron had.

dudarobi said,  

Neha.S very special thanks to your solution. Great!
Rob

Brandon said,  

Neha.S, Special thanks. Your java script solution has been added.

Cheers!

Jenny said,  

This is probably another silly question. But I’m using this script in a website with one style.css file for an entire website and its pages. When I put all these portions in their proper places, it doesn’t show up on the page, except when I highlight where it should be. While it’s highlighted, I can scroll over it and see that the bar is moving around…but there’s not an image to match it. I’ve checked my paths to those two images in the css file….so I’m not sure what it is. Sorry, I’m new to javascript and jquery, so just experimenting with this to make the site look better :) Thanks for any help!

Brandon said,  

Jenny, Please post a URL to your page and Ill take a look for you. :)

Jenny said,  

I think I may have actually figured it out (and feeling sort of dumb haha)working with a friend because I’m just messing with some files on my own computer. Thank you though!

balout4sale said,  

I have a problem when i use lavalamp in my website. my orbit image slider is not working anymore. Please help me with my problem… here it is: http://balout4sale.0fees.net

Brandon said,  

Balout4sale, The slider is working fine for me. Have you checked your code in multiple browsers?

josh said,  

brandon, sorry for my bad english. I’ve tried your lavalamp sliding menu but it’s not working . I’ve copied all but still the image goes back to where it all started. I’m using firefox as browser.

Brian said,  

Thanks for sharing this, I have been wanting to take the time to figure this feature out.

leo said,  

Has anyone tried to combine this with a dropdown menu? i got everything fine exept 2 things:
- i have a “.hassub” class and when i hover over this, the menu drops down and now i have to change the border-radius in the .back class.
- when i hover over the items in the sub menu the “lava” should stay behind the parent-element.
could these two things be done in css in any way? ordo i have to use javascript or some kind of jquery, which i am not very familiar with.

Aditya said,  

This feature is really great and i was looking for it .
I want some modification in that , I want to add sliding function(toScroll: horizontal) when i move over on different section the content of the section should also change!!!

May you help me with this?

workaholic4u said,  

hm….. zhanks a loz for this great tutorial, i applied it to my new site, everything is working so far… but the thing with the class=”current” is not working. I really dont get it as soon as i load a another page it still returns to the first (home) button. assigning a current class to the other menu object does not chnge anything, so what are we going to miss here, are you sure the .kd files are in a line with the code you added later on to this tutorial?

Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: All comments maybe under going moderation so there is no need to resubmit the comments. it will appeared when admin approved it, feel free to subscribes to the post comments rss to stay update