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.
[...] [...]
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
If you are using Lavalamp menu in WordPress and you want to highligth the current page item, you just have to repalce all ocurrencies for “current” in jquery.lavalamp.js to “current_page_item”.
May i know how to put a dropdown submenu in my main menu that will ease when i hover it.Please help. thanks…
[...] 8. LavaLamp [...]
Hey Ganesh
Big thanks for this Plugin – Lavalamp looks awesome!
I put it on my website http://www.redkoaladesign.pl
[...] Demo | Tutorial [...]
Maybe a stupid question ? would this work on a vertical menu ?
Thank you for sharing !
Hey,
I am wondering the same thing that others on this page have asked about keeping the current page highlighted when you click the link. If anyone has a solution I would really appreciate it. Thanks
P.S You need a better spam filter!
hey thank you for this javascript it help me to release my new website
you are so great here i have used it http://www.khoatu.de/
[...] the Mootools library. And later a jQuery version of this menu called lavalamp was made popular by Ganesh. This time I will show you how to achieve the same effect using the CSS3 new [...]
Hi…
I’m using ur scripts as a normal scripts (not for wp or joomla).
Now the problem is how to fix the .current issue ?
Everytime i click the links, the position is back to the first li.
Too many comments already and make me dizzy to find the solution.
Thanks,
Raff
[...] 11.) Build a LavaLamp Menu [...]
[...] LavaLampI did a thing just like this on CSS-Tricks, this is the original [...]
is there a way to enable/disable menu sub-items in this control?
Love the plugin!!! Thanks!!!!
Is there a way to set the default menu item?
For example the selection stays put on Home. If I’m on the About us page, I’d like it to stay/start from the about us link.
Is there a setting which will achieve this?
Thanks!
Hey,
Can you please explain your reply to comment #732.
I am a newbie to all this jQuery and lavalamp. What I want is what John wants. I want lavalamp menu to be able to control tabs (be it coda slider or anything else).
Please help me on how to do it.
Also,
I noticed that in your example if I increase number of characters in a menu item say “Riding an Elephant11111111111″ then after a fixed number of characters the lava.gif image that hovers BREAKS
I want something like this http://sinanyasar.com/blog/?p=80
But just that I don’t understand the language this blog is written in and Google Translate isn’t giving any meaningful results
i want change default blue line from “home” to “Ride an elephant”.
what i do??????
therefore, i will changed this menu work from left to right state, because “Home” in my language is at right side and “Ride an elephant” is at Left side.
please help me…
wow, I tested it, and it work this is the first time to use a jquery menu
thanks
I’ve used it, its really good but i can’t use it with CSS Dock Menu Jquery together in the same website. i don’t know why but I’ve really tried it, does any one know how to fix it? let me know please. danial_comp@yahoo.com
Your script is great and I love it, but I’m having trouble when I am using a custom font for the menu (@font-face). It works swimmingly in IE and Firefox on a Mac, but in Firefox 3.5 on a PC, the “current” hover state displays incorrectly until the menu is rolled over. I believe it is loading the default font first, placing the hover in the space where it thinks it belongs, then the TTF font finally loads and shifts the menu, so now the hover is in the wrong spot. I’ve tried putting in FOUT scripts, but they have the same result (even though a FOUT script will hide the default font from the browser until the custom font is loaded, the loading order problem is still the same). Is there anyway to delay the loading of the “li.back” class until after the custom font has loaded, or a way to redraw the page so that it knows that the text has changed? I’m tearing my hair out trying to make this work with the custom font before I give up and go back to a web font. Thank you for any help you can provide me!
thanx friends this is so amazing for my site
Thanks Again lot………
This will help me lot
If I try a link like this is in the menu:
a href=#something
it does not work if I’m using this plugin.
Any workaround will be appreciated.
On second thoughts, none of the links work.
I thought may be I had changed something. So I downloaded the plugin again and just added a link in your menu and it is not working.
Nothing happens when I click on the menu link.
Hi, very nice plugin
I want to set the current object by clicking on another link in the page than the lavalamp link himself. How can I do that ?
(i’m french, so sorry for my bad english xD)
Thank’s you
My links doesn’t works in your lavalamp menu. I inserted at but also not working. Is there another way?
As per previous comments – It looks great but does not seem to hyperlink to other pages ?. I have tried it in 4 different browsers. Am i doing something wrong ?
My links doesn’t works in your laval
[...] Lava Lamp Menu Attached Files [...]
Same problem as many others – everything works fine except the actual hyperlinks do not work when clicked. however, right clicking and selecting ‘open in new tab’ etc, they do work. Any suggestions?
@John
If you remove
“,
click: function(event, menuItem) {
return false;
}
”
From the javascript the links will work, note to remove the comma after the speed value as well.
@Leo
Thank you so much, works perfectly now!
[...] 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 [...]
[...] 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 [...]
[...] 11.) Build a LavaLamp Menu [...]
Nice tips for HTML and Java!thanks dude…from read other’s problems, I got my answer!Thanks for this information.
Is it possible to control Lavalamp with a second menu, too?
I’ve got a Lavalamp menu on top of the website and a second menu in a sidebar, which conains the same entries. I want to update the curr variable with the value of the item I clicked in the side menu, but I don’t know how to do it.
Thanks!
… meanwhile I found it out myself
[...] 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 [...]
[...] 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 [...]
Is there any way to change the colours similar to MagicLine’s CSS trick, which unfortunately, doesn’t work with Internet Explorer.
http://css-tricks.com/examples/MagicLine/
hi,
How do you modify this to handle down down sub menu off the list tag?
Yes, this is what I’d like to know as well. At http://apycom.com/menus/1-white-smoke.html, they have multilevel menus, but AFAICS, the lavalamp effect (if present) spans the topmost level only.