LavaLamp for jQuery lovers! August 23rd, 2007

Hover above and feel for yourself, the nifty effect of Lava Lamp. 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.

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.

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.

2,411 Responses to “LavaLamp for jQuery lovers!”

« 130 31 32 33 34 35 36 37 38 39 4049 » Show All

  1. 1701. Spelen on January 8th, 2011 at 6:30 am

    That was a really good tutorial! I followed the instructions and it worked very smoothly :-)

    Great Job!

  2. 1702. Skyler on January 9th, 2011 at 1:20 am

    You do realize that the links don’t work right? That renders this menu useless! How do you fix it?

  3. 1703. d8ressa on January 9th, 2011 at 3:15 pm

    To make the link works
    you must go on the head of your index.html in the function of the script and set the return to true.

    turn this

    click: function(event, menuItem) {
    return false;
    }

    into this
    click: function(event, menuItem) {
    return true;
    }

    best regards!

  4. 1704. Sally on January 10th, 2011 at 7:11 am

    Hi…again thanks such a great tutorial!

    If anyone knows how to make the lava lamp bg image disappear when the mouse is off the menu I’d be grateful if you let me know.

    Thanks!!

  5. 1705. Ilya on January 10th, 2011 at 3:00 pm

    This will be helpful for sites with “header” using to make working:

    Home
    Home

    About
    About

    and so on… like 2 previous

    In case it is not working try to change $_SERVER['REQUEST_URI'] to $_SERVER['PHP_SELF']

  6. 1706. Ilya on January 10th, 2011 at 3:09 pm

    This will be helpful for sites with “header” using to make working:

    Main
    Main

    Catalogue
    Catalogue

    and so on… like 2 previous


    In case it is not working try to change $_SERVER['REQUEST_URI'] to $_SERVER['PHP_SELF']

    /Please delete previous wrong post/

  7. 1707. Ilya on January 10th, 2011 at 3:17 pm

    Pfff dunno how to paste here visible code…

  8. 1708. Ilya on January 10th, 2011 at 3:39 pm
  9. [...] LinkedIn [...]

  10. 1710. Puppies for sale on January 12th, 2011 at 11:51 am

    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.

  11. 1711. Lexus on January 13th, 2011 at 12:34 pm

    So it may not just be the regime on the bus to the Hague. Aiding and abetting after-the-fact has consequences too.

  12. 1712. Dans on January 13th, 2011 at 5:17 pm

    really thank you very successful

  13. 1713. Organizasyon on January 13th, 2011 at 5:19 pm

    receive a very great share of health

  14. 1714. Dans Kurslar? on January 13th, 2011 at 5:19 pm

    Thank you the site owner had never heard this before

  15. 1715. Dans Dersleri on January 13th, 2011 at 5:21 pm

    Thank you very kind of thinking

  16. 1716. sxe indir on January 13th, 2011 at 6:15 pm

    thanks

  17. 1717. LavaLamp for jQuery lovers! | Blog on January 14th, 2011 at 10:55 am

    [...] donde su creador Ganeshji Marwaha detalla paso por paso como hacerlo con Html,Css, Jquery   , http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ Esta entrada fue publicada en Tutorial. Guarda el enlace permanente. ← Tutorial [...]

  18. 1718. matbaa ilan on January 14th, 2011 at 11:50 pm

    thanks for share..

  19. 1719. web tasar?m on January 14th, 2011 at 11:50 pm

    thank.

  20. 1720. 24 Javascript Advance Menus on January 15th, 2011 at 1:43 pm

    [...] LavaLamp for jQuery lovers [...]

  21. 1721. seo sheffield on January 17th, 2011 at 2:03 pm

    very informative post, thanks for sharing it with us

  22. 1722. Website laten maken on January 17th, 2011 at 3:05 pm

    Verry Nice,

    Is it possible to use it with images? 1 image for left, 1 image for right and 1 image for the middle of the menuoption?

  23. 1723. vpn service on January 18th, 2011 at 6:07 am

    I certainly enjoyed the way you explore your experience and knowledge of the subject! Keep up on it. Thanks for sharing the info

  24. 1724. beko on January 18th, 2011 at 7:24 pm

    to create different results.

  25. 1725. grek on January 18th, 2011 at 8:56 pm

    hy i have some problem lavalamp remoe my links see it on

    http://desportonaescola.biuro.dogmat.eu/

    when mouse over – button active there is no <A , only <div left
    why ?

  26. 1726. Emre on January 19th, 2011 at 10:05 am

    Thank You so much for the real.

  27. 1727. labatterie on January 19th, 2011 at 11:13 am

    I have some problem lavalamp remoe my links see it on …

  28. 1728. Discount New Era Hats on January 20th, 2011 at 2:31 am

    I have some problem lavalamp remoe my links see it on …

  29. 1729. 240????jQuery?? | blog.moocss.com on January 20th, 2011 at 5:10 am

    [...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]

  30. 1730. TonyC on January 21st, 2011 at 5:49 pm

    Hi Ganesh. Lovely work – thanks for sharing it! By default the background image has some transparency. Certainly the image that I have substituted is rendered semi-transparent. I can’t see where this is set? I’m adapting for my needs and need the background image to be full opacity. Thanks.

  31. [...] Le splendide librerie jQuery ci vengono incontro ancora una volta con un plugin leggero e facile da integrare che darà al tuo menu di navigazione un simpatico effetto di movimento senza per forza usare animazioni Flash difficili da implementare specialmente in ambito di creazione automatica e gestione dei menu. Un esempio concreto di quello che andremo a creare lo puoi trovare direttamente nel sito dell’autore di questo plugin Lavalamp for jQuery lovers! [...]

  32. 1733. PSVD?????? » 25 JQuery??????? on January 24th, 2011 at 10:02 am

    [...] LavaLamp?jQuery???? [...]

  33. 1734. Phoenix Vacation Rentals on January 27th, 2011 at 9:21 am

    Not sure why my background on the remote lava lamp won’t switch colors but I really like your script. It must be me.

  34. 1735. Randy on January 27th, 2011 at 7:03 pm

    Hello, I’ve tried everything I can think of getting lavalamp to work with wordpress 3.0.4 and no progress. Wondering if anyone found a way to make the active link remain highlighter. After clicking a link the “bubble” goes back to the original position. I have tried EVERYTHING including editing the nav_menu_template.php of wordpress nothing. Stressing out.

  35. 1736. Jamie on January 28th, 2011 at 6:43 pm

    @Randy, I used this on a wordpress and to get round the fact that the menu wont highlight the active page (in other words the bubble doesnt sit over the link to the page you are on (the active page) it sits on the first li)
    I just added an empty li as the first li, so that the bubble disappears totally until the menu is hovered over, not the best fix, but it does prevent the bubble from sitting on the “home” link when you’re not actually on the home page.

  36. 1737. Patrick Rauland on January 28th, 2011 at 10:38 pm

    @Randy (#1772) and @Jamie (#1773)

    There is an easy fix for wordpress installs, you just have to change two words in the lavalamp file.

    http://hekimian-williams.com/?p=146

  37. 1738. Bidet Seat on January 31st, 2011 at 1:02 am

    Nice topic.

  38. 1739. Online Home Based Business on January 31st, 2011 at 11:10 am

    I feel like you could probably teach a class on how to make a great blog. This is fantastic! I have to say, what really got me was your design.

  39. 1740. film on January 31st, 2011 at 4:36 pm

    Thank You so much for the real.

  40. 1741. aFa on January 31st, 2011 at 8:15 pm

    didn’t know about it, it looks simple and effective thanks

  41. 1742. usi on February 1st, 2011 at 2:37 am

    wasted a little time wondering why the links weren’t clickable, but i believe in the end it was worth it.

  42. 1743. jQuery???? | Wang Jun's Blog on February 1st, 2011 at 8:53 am

    [...] for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS Dock Menu.jQuery Pop-up [...]

  43. 1744. Bidet Seat on February 2nd, 2011 at 3:52 am

    You can visit our site at http://www.thebidetseatco.com/

  44. 1745. Benjamin on February 2nd, 2011 at 2:43 pm

    Hello there,

    Thanks for the plugin, it’s great! I really like it!

    I have a queston: if I didn’t set any of the -s to .current, the first item of the list automatically set to .current. But I do not need this feature. Can I switch it off? So nothing would be set to current unless I add the class.

    Thank you (guys)!

  45. 1746. Sohbet on February 3rd, 2011 at 1:53 am

    sssss

  46. 1747. jquery?? | Wang Jun's Blog on February 3rd, 2011 at 10:15 am

    [...] for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS Dock Menu.jQuery Pop-up [...]

  47. 1748. php development on February 5th, 2011 at 7:30 am

    Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery Pop-up Menu Tutorial. Sliding

  48. 1749. Phone Skin on February 6th, 2011 at 5:15 pm

    I harmonize with your conclusions and will thirstily look forward to your upcoming updates. Saying thanks will not just be sufficient, for the phenomenal clarity in your writing.

  49. 1750. Pascal on February 7th, 2011 at 6:01 pm

    Please, i have question, HOW i can short this line. Where in css or js is this line.

    http://img810.imageshack.us/i/snmkal.png/

« 130 31 32 33 34 35 36 37 38 39 4049 » Show All