LavaLamp for jQuery lovers!

lavalamp-image

Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

Just so you know, it weighs just 700 bytes(minified)!

Often I have noticed, that the credits are usually granted towards the end. Just for a change, i am going to give my credits at the beginning. This effect was originally written by Guillermo Rauch for the mootools javascript library. All I did was to port it for the benefit of jQuery lovers. Thanks Guillermo for inspiring the javascript world with such a nice effect. A special thanks to Stephan Beal who named it “LavaLamp”, and to Glen Lipka for generously helping with the image sprites. Many fellow jQuery lovers also helped shape this plugin with valuable feedback in the mailing list. Thanks a ton, all you guys.

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.

I hope you agree that a typical HTML widget consists of 3 distinct components.

  • A semantically correct HTML markup
  • A CSS to skin the markup
  • An unobstrusive javascript that gives it a purpose

Now lets follow the above steps and implement the LavaLamp menu for your site. Remember, In the process of porting from mootools to jQuery, i have simplified both the javascript and CSS for your convenience. So, be informed that you will need to follow the instructions on this page to get the jQuery version running. Follow the instructions on Guillermo Rauch’s page for the mootools version.

Step 1: The HTML

Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that.

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

In the markup above, “ul” represents the menu, and each “li” represents a menu-item. At this point it is crucial to understand that we will be adding another artificial “li” to represent the background of the currently highlighted menu-item. Since the background itself is cosmetic and doesn’t represent a menu-item, we will be adding it from javascript. Just to make sure we are in sync, “you need not add this li”, the LavaLamp plugin will take care of it. Once added, the “li” representing the background will look like this.

        <li class="back"><div class="left"></div></li>

Step 2: The CSS

You can skin this markup in many different ways to achieve your own personalized menu. The following style sheet is just one possibility. A few more possibilities are demonstrated in the “Bonus” section towards the end of this blog entry.

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

Trust me, this is a simple style sheet. Follow along to understand what is done in each of its sections.

First, we style the “ul” with the bright orange background image and some basic properties like height, width, padding, margin etc. We use relative positioning because, that way we can absolutely position the background “li” relative to the “ul”. This helps by enabling us to move this background “li” freely within the context of the parent “ul”.

Next, we make the “li”s flow horizontally instead of vertically. By default, it flows vertically. There are a couple of techniques to do this. In this case, we are using the “float:left” to achieve this effect.

Next, we style the artifical “li” that represents the background of the currently highlighted menu-item. This uses the sliding doors technique. Also, notice the absolute positioning used as mentioned above.

Finally, we style the anchor that represents the actual clickable portion of each menu-item. These styles are mostly cosmetic and self-explanatory.

Some of the above rules may not be obvious if you are not very confident in how “positioning” works in CSS. For those, i highly encourage you to quickly read this article on CSS positioning. It is short, sweet and very informative.

Step 3: The Javascript

This is the easy part. Most of the javascript work is taken care by the Lava Lamp plugin itself. As a developer, you just have to include the mandatory and/or optional javascript files and fire a call to initialize the menu.

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

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

Include a reference to the jQuery library and the LavaLamp plugin. Optionally, include the easing plugin as well. It has many cool effects, that are not contained in the core. For instance, the “backout” effect used in this demo is part of the easing plugin. You can download jQuery here, Easing plugin here, and the LavaLamp plugin here.

Next, in the document.ready event, fire a call to initialize the menu. You have the option to supply an easing “fx” , the “speed” with which the animation happens and a callback to be executed when a menu-item is clicked. They are optional, the default “fx” being “linear” and the default “speed” being “500” ms.

That’s it. At this point you should have a working version of LavaLamp menu for your site.

Bonus

Just with some minor changes in the style sheet, you can get a totally different look n feel for the menu. And yes, the HTML markup and the Javascript remain the same. Click on the image below to experience the demo for this underline-imageless lavalamp.

lavalamp-underline-image

Here is one more variation, again with just some minor changes to the style sheet. I know, they don’t look pretty, but all i am saying is that you are limited only by your imagination. Click on the image below to see the demo for this boxed-imageless lavalamp.

lavalamp-box-image

Finally, for your convenience, i have zipped up all the necessary files into a cohesive package. Download it, and open the demo.html to see all the 3 variations in one page.

Feel free to leave a comment with your feedback, suggestions, requests etc.

Update

Based on popular request, LavaLamp Menu has been updated to support jquery 1.2.x versions. Download the zip file for version 0.2.0 of LavaLamp and open the demo.html to check it out for yourself. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.

Ganeshji Marwaha

I spend my days as the Director of Technology for Mobility practice and help my clients design enterprise and consumer mobile strategies. Mobile Payments, Digital Wallet and Tokenization technologies are my areas of specialization

  • Pingback: 20 Excellent JavaScript Navigation Techniques and Examples | 1 step web design()

  • pardeep

    Can i get css calss fro current?

  • Pipo

    Lavalamp doesn’t work anymore with latest jquery / easing scripts… Anyone car fix this?

    Jquery 1.6.4 / easing 1.3

    Thanks !

  • Your site gives me much interesting stuff here, I really enjoyed. I will be back for more new updates here.

  • tareq

    i have this problem , the links in the menu have $_GET values,
    so the page will just refresh and change the content , but the menu refresh too and back to the first item , how can i stay on the clicked item after refreshing the page ,
    please anyone can help with this :s:s

    thanks
    cheers

  • tareq

    hey all ,
    sorry for the duplicate posts , but i saw in previos post that we need to add a class (current) , to view what page is on , i didn’t get it well , please can anyone tell me what to do as soon as he can , am out of time

  • I agree with your Blog and I will be back to check it more in the future so please keep up your work. I love your content & the way that you write. It looks like you have been doing this for a while now, how long have you been blogging for?

  • I agree with your Blog and I will be back to check it more in the future so please keep up your work. I love your content & the way that you write. It looks like you have been doing this for a while now, how long have you been blogging for?

  • Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

  • Really appreciate this post. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it!

  • Hi,
    I very like what you are doing here.
    PM me if you like to do some private jobs.

  • Hi,
    I very like what you are doing here.
    PM me if you like to do some private jobs.
    Dan Articles
    Thanks

  • Hello, Neat post. There is a problem along with your website in internet explorer, could test this… IE still is the market chief and a huge portion of other people will miss your wonderful writing due to this problem.

  • Had been searching for this and learned a lot more than expected here. Glad I found it.

  • Jung Yeop

    Very helpful! Such a pleasant surprise for an article. Specially this part “As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site” More power

    Background Check Rental

  • claire anne

    This is highly informatics, crisp and clear. I think that Everything has been described in systematic manner so that reader could get maximum information and learn many thingsspy apps for cell phone
    spy on cell phone software
    tracker app for cell

  • I came to know about Java fro this site..java is a object oriented oriented programming language..I came to know about Hyper text mark up language and CSS..nice information..

  • Wholesale Jeans

  • nice article thanks for sharing with us

  • I installed tinymce-advanced and it is probably even worse. Now I’m absolutely unable to work with xml snippets. Each time I save a draft in HTML mode and after that switch to Visual mode all my XML snippets are deleted. Is there any special configuration I must turn on or do I need to encode all XML element (I tried it already and it looks like Syntax highlighter doesn’t like it)?

  • I specially like this part “As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction

  • Nice, accurate and to the point. Not everyone can provide information with proper flow. Good post. I am going to save the URL and will definitely visit again. Keep it up.

  • tareq

    hey all ,
    how can i add a drop down submenu to this menu , plzzzzzzzz help me

  • Pingback: jQuery mouse over menu and animate position element behind - Programmers Goodies()

  • 4got2book compares the majority of the world’s budget and luxury hotels,Our search engine checks more than 200,000 hotels in thousands of destinations, and over 200 countries worldwide

  • Keep up your work I want to thank you for this informative read I really appreciate sharing this great post. Keep up your work

  • Your article very interesting, I have introduced a lot of friends look at this article.

  • Great post. I used to be checking continuously this blog and I am impressed! Extremely helpful information specifically the closing part 🙂 I maintain such information a lot. I used to be looking for this particular information for a long time. Thank you and best of luck.

  • Wonderful goods from you, man. I have bear in mind your stuff previous to and you are just too fantastic. I actually like what you have got right here, really like what you are saying and the way wherein you are saying it. You make it entertaining and you still take care of to stay it wise. I cant wait to learn far more from you. That is actually a great web site.

  • Interesting post and thanks for sharing. Some things in here I have not thought about before.Thanks for making

  • Wonderful post. I am searching awesome news and idea. What I have found from your site, it is actually highly content. You have spent long time for this post. It’s a very useful and interesting site. Thanks!
    When visiting these blogs that are written by the same author, he has a lot of followers.

  • Jimmy Nguyen

    I just love your site. I specially like this part “As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site”..More power

    Tenant Screening

  • Pingback: jQuery????? | Umhere()

  • Seriously cool effect – all it needs now is that swirly effect you got if you shook one up. Probably a bit too exciting for systems accountants, by I shall certainly try it out on one of my personal sites.

  • Juanma_Alcon

    Hi, great tut!

    Anyone knows how to put together the lavalamp jquery and one lightbox jquery plugin like prettyphoto, fancybox, etc.?

    please, help!!

  • Pingback: ?????jquery????????? | ?????()

  • PL

    Hi, How can we text-align the whole menubar please.

  • PL

    Hi, How can we text-align in the center all the menubar please.

    THanks !

  • PL

    Can we use it with an horizontal and vertical menu in the same time?

  • good for share menu if u bulid menu drop down then better good.
    thank you.

  • I have been meaning to read this and just never got a chance. Its an issue that Im very interested in, I just started reading and Im glad I did. Youre a wonderful blogger, 1 of the most effective that Ive seen. This weblog undoubtedly has some facts on topic that I just wasnt aware of. Thanks for bringing this stuff to light.

  • Wow this is perfect. Great tutorial. I am not so strong at jquery, but I am definately gonna try this!

  • Pretty peachy aviator. I fair stumbled upon your diary and wanted to say that I get truly enjoyed measure your blog posts. Any way I gift be subscribing to your cater and I plan you accumulation again soon.
    computer hardware store

  • No one can succeed without any hard create. Karl Max was victorious, because he spent many than 30 period penning the volume “Commie Manifesto”; Tomas Artificer succeeded, because he had experimented thousands of present to find the good material for lights. Every success calls for petrified make. If you want to suc-ceed, business slaty foremost.

  • It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

  • Pingback: 250?JQuery?? | sae wp blog for lz()

  • David

    I already try to implement this, the script to call the link don’t work. How to fix this?

  • David

    Ooh, never mind i already figure it out:
    this is the problem, just remove that line.
    click: function(event) {
    return false;

  • Pingback: 26 jQuery Plugins for Superb Navigation | TECHNOLOGY NEWZ.COM()

  • Pingback: KIDS LAVA LAMP CRAFT | Kids Lighting()