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

« 12 3 4 5 6 7 8 9 10 11 1249 » Show All

  1. 301. iphone games on September 21st, 2008 at 10:07 pm

    Very nice, thank you Mark. ;)

  2. 302. Rachel on September 22nd, 2008 at 6:55 am

    Hey Guys

    I was wondering if someone can supply me with a link to a working version with submenus?

    Cheers Rachel

  3. 303. 200+ jQuery?? | ???? on September 23rd, 2008 at 3:15 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 [...]

  4. 304. wG on September 23rd, 2008 at 6:56 am

    Hello people,

    earlier the click was not working,so i used the code given above by Nandha(Nandha on October 24th, 2007 at 9:17 am )
    $(function() {
    $(”#1, #2, #3?).lavaLamp({
    fx: “backout”,
    speed: 700,
    click: function(event, menuItem) {
    return false;
    }

    but now that hover effect is not working,

    can anybody tell where am i wrong

  5. 305. wG on September 23rd, 2008 at 6:57 am

    Hello people,

    earlier the click was not working,so i used the code given above by Nandha(Nandha on October 24th, 2007 at 9:17 am )
    $(function() {
    $(”#1, #2, #3?).lavaLamp({
    fx: “backout”,
    speed: 700,
    click: function(event, menuItem) {
    return false;
    }

    but now that hover effect is not working,

    can anybody tell where am i wrong

  6. 306. Ryan on September 24th, 2008 at 3:56 am

    Has anyone ever tried to incorporate this into a 2 tier menu?
    I will be trying to mash this, and jquery suckerfish (first 2 tiers horizontal, third vertical.

    really keen to see if it can be done without too much css….

  7. 307. eb on September 28th, 2008 at 8:19 am

    This lavalamp needs an update!! NOT compatible with the latest jquery! :-(

  8. 308. ??jquery???????? - ????|????? on September 29th, 2008 at 6:30 pm

    [...] 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 [...]

  9. 309. noam on September 29th, 2008 at 10:39 pm

    I have a question, I’m very new to this jquery.
    I’m using this lavalamp menu system, but when i click on a menu item, I need it to obviously go to another page. On that new page, I need that lavalamp also visible but with the 2nd menu item highlighted with the lavalamp.

    Makes sense? How do I make this happen?

    Thank you

  10. 310. Ganeshji Marwaha on September 30th, 2008 at 6:24 am

    @noam: Assign a URL to the menu-item anchors to get the links working.

    If you are using the code in demo download, then remove the click event associated with the initialization of LavaLamp. This click event is there in the first place to prevent the links from taking the user to a different page, just for demo purposes.

    Finally, to have the clicked menu-item to be selected as part of the next page, supply a class called “current” to the <li> that represents the current page. This should be taken care by your server side logic. If you don’t supply a class to any <li>, then the first <li> will be considered by default.

  11. 311. Rohin Sharma on October 4th, 2008 at 4:19 pm

    Ganesh Ji , great code man , I’m loving it. Just one thing , How can I make the current page my readers are looking at be the current I searched the entire posts and did not find an answer. Is there a php code I could use?

  12. 312. Fantastic javascript (AJAX) CSS menu | Goodies Depot on October 6th, 2008 at 3:45 am

    [...] LavaLamp jQuery Sliding Menu It is a jQuery sliding effect menu with light weight code and extra two more interface styles. This effect was originally written by Guillermo Rauch using mootools javascript library. [...]

  13. 313. chiao on October 6th, 2008 at 3:47 am

    Great work!Awesome!!!
    regards from China.

  14. 314. Luis on October 6th, 2008 at 8:37 pm

    ok I hope you can help me figure this one out. I am trying to get my links to work and they dont, I used and then replaced the below:

    Home
    Plant a tree
    Travel
    Ride an elephant

    I typed in and put it my links and replaced the “#” i.e :

    Home
    Plant a tree
    Travel
    Ride an elephant

    but when I cliked on the buttons they dont go anywhere. Could you please tell me what am I doing wrong ? I will really appreciate it, txs.

  15. 315. imagic’s blog » Blog Archive » JQUERY???? on October 7th, 2008 at 4:03 pm

    [...] 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 [...]

  16. 316. imagic’s blog » Blog Archive » JQUERY???? on October 7th, 2008 at 4:03 pm

    [...] 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 [...]

  17. 317. ??diary-cute???????? | page's blog on October 11th, 2008 at 10:03 pm

    [...] ?????????diary-cute??theme?lightbox-2??????????????diary-cute???lavalamp???????slideshow???????jQuery??lightbox-2?????Prototype???????$()???????????? [...]

  18. 318. jQuery Eklentileri | Bir Ö?renci Klasi?i on October 12th, 2008 at 9:19 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 [...]

  19. 319. ??…..?????? -_-|| » 240??jQuery?? on October 14th, 2008 at 9: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 [...]

  20. 320. Antonio Wells on October 14th, 2008 at 11:36 am

    This plugin is very impressive! I dont have to use Flash to get the same simple effect! Thanks!

  21. 321. srui’s blog » 240??jQuery?? on October 15th, 2008 at 6:33 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 [...]

  22. [...] the JQuery port of the fancy menu effect read this post or this post at meta20.net (aka Smooth Menu for [...]

  23. 323. cyberman on October 17th, 2008 at 1:38 am

    “I am using LavaLamp with AjaxContent Plug-In http://www.andreacfm.com/index.cfm/jquery-plug-ins/ajax-content; is it the combination of the 2 why the menu doesn’t stay on the current click link with the menu when using an Ajax method? It keeps reverting back to the previous link which is the default.”

    Look for the line: var $li = $(‘li’, this);
    Changed it to: var $li = $(‘li a’, this);

    It works for me.

  24. 324. Ashley on October 18th, 2008 at 5:32 pm

    I am having trouble setting the current state in .net (C#). I am using this menu as a control within my master page. The links can either be normal anchor tags or asp hyperlinks. Anyone know how I can get this to work?

  25. [...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]

  26. [...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]

  27. 327. North Cyprus Holiday on October 20th, 2008 at 2:05 pm

    I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.

  28. 328. Flash Drive on October 21st, 2008 at 6:39 am

    This plugin is very impressive! I dont have to use Flash to get the same simple effect! Thanks!
    http://www.intronhk.com/memory.html

  29. 329. Ajaxian » Great JavaScript and CSS Menu Libraries on October 21st, 2008 at 10:59 am

    [...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]

  30. 330. Lexx on October 21st, 2008 at 12:21 pm

    Does anybody have a blinking of cursor in IE6 ? How can I fix it?

  31. [...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]

  32. [...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]

  33. 333. JavaScript and CSS Menu Libraries catalog on October 22nd, 2008 at 10:23 am

    [...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]

  34. 334. karan on October 23rd, 2008 at 3:22 am

    Ganesh
    Nice work.

    I am trying to use you lava lamp menu.
    I wanted to ask you once I click one particular menu item and it navigates to another page how is it possible to highlight the menu item that was clicked. Now what it does it whenever i click any menu item and it navigates to another page the highlight moves to the leftmost menu item.
    Any suggestions

  35. 335. Michael Traylor on October 24th, 2008 at 8:42 pm

    I figured out how to make css submenus for this plugin. Change .hover to .mouse over in the $li.not(“.back”) block of code.
    before: $li.not(“.back”).hover(function() {
    move(this);
    }, noop);

    after: $li.not(“.back”).mouseover(function() {
    move(this);
    }, noop);

    The .hover only works for its specific tag, .mouseover also includes the child elements.

  36. 336. ?????240??jQuery?? | ???? on October 29th, 2008 at 8:22 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 [...]

  37. 337. Alan Bristow on October 29th, 2008 at 5:18 pm

    Wow!

    I love that this has real-world physics in the movement. Thanks a great loads to all involved, I am sure I will use this jQ add-on.

  38. 338. 110+ javascript / Ajax bookmarks for web developers on October 29th, 2008 at 7:40 pm

    [...] Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu [...]

  39. 339. 110+ javascript / Ajax bookmarks for web developers on October 29th, 2008 at 7:40 pm

    [...] Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu [...]

  40. 340. Mario on October 29th, 2008 at 10:40 pm

    SOLUTION for the “non working links”:
    Comment or removed from on jquery.lavalamp.js:

    $li.click(function(e) {
    setCurr(this);
    return o.click.apply(this, [e, this]);
    });

  41. 341. 200+ jQuery?? | ???? on October 31st, 2008 at 5:41 am

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

  42. 342. 240 ???????????? ???????? ??? jQuery | Parinoff Life on October 31st, 2008 at 1:43 pm

    [...] Lava Lamp jQuery Menu [...]

  43. 343. Sam on November 1st, 2008 at 4:57 am

    Anyone figure out how to get rid of the blinking cursor in IE6? Only seems to be a problem when using lavaLampWithImage. Thanks!

  44. 344. Emrah on November 2nd, 2008 at 10:40 am

    Hello there… can anyone help me with editing this menu… i couldnt figure out how to edit the first link on left side. When i change the home with something else… the flowing onhover image is getting out of the orange backround line… so my link too… how can i edit the positions of the links “home” “plant a tree” etc. how can i take them to the middle? or a side right

  45. 345. chris on November 2nd, 2008 at 11:46 am

    very nice script! love it! one question. I`m using the first example with images. But instead of a background image I only use the sliding lava image. the background is white and the lava image dark grey. the links are in a dark grey too. the current menu item is white so You can read it on the dark grey background. how can I change the script that the active item turns into grey again, when hovering another menu item, cause it`s invisible on the white background when the lava images slides to the hovered item?

    regards chris

  46. 346. Christian Seeber on November 4th, 2008 at 3:21 am

    is there a way to get this to stay highlighted on the last item you rolled over? In other words, the background doesn’t slide back to the class=”current” item?

    - C

  47. 347. fusify on November 4th, 2008 at 9:16 pm

    Here is the solution to get it to work with jquery-1.2.6.min.js

    open this file jquery.lavalamp.min.js

    find the following line
    {$back.each(function(){$.dequeue(this,”fx”)}).animate
    changed to this:
    {$back.stop().animate

  48. [...] one uses Lavalamp a jquery menu plug in with smooth [...]

  49. 349. Roshan on November 5th, 2008 at 5:47 am

    Hi, Just letting you know that i made a free css template with te with lavalamp menu. the template is inspired by itunes and i think lavalamp looks perfect in it. thank you so much for making this. You can download it from my website.

  50. 350. swfMonkey on November 5th, 2008 at 11:18 pm

    I understand the method of declaring an to show the currently selected menu link. Is there a method to do this dynamically though? Can you declare the currently selected menu item via a javascript function on each page? Any help is appreciated! Thanks!

« 12 3 4 5 6 7 8 9 10 11 1249 » Show All