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.
[...] Lava Lam jQuery Menu [...]
links in element \Test\ not works and yes i have my file in the same directory, but don’t works… why?????
Hi can anybody help me, im trying to set the selected tab when i go to a new page within my site but cant figure out how to do it. Im new to jquery so im finding it quite confusing.
[...] la démo du menu ou le télécharger gratuitement du code source, c’est ici. 0 [...]
Hi I have a little problem.
How I can set the starting point ?? help..
Hello, this is a very nice tutorial. Is there a multi-level option version of the lavalamp menu? Thanks.
That’s easy, if you need to set the menu to a specified tab once the page is loaded, simply put class=”current” on the li tag…
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] LavaLamp for jQuery lovers! [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
[...] 5, Lavalamp, for sexy hovers. http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] LavaLamp Navigation menu with a 'lava' effect. [...]
everything works fine … except my links don’t work. Why don’t they work when I click them on the page?
good job
thanks for codes
thanks for tutorial
Thanks, helpful source.
One of the best tutorials ever. Thanks.
Cool article, great script THANKS.
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
Hello, this is a very nice tutorial.
[...] gmarwaha.com [...]
Hi! Nice tutorial. But in Firefox (last version) I can’t open the links. I’m just clicking them but nothing happen. Please HELP!
I dont know why it didn’t work for me. I’ve downloaded the zip and opened the html file but it’s only displaying as text and nothing is working. Could you please help me? I’d like to make a jCaroullite as well but it is also not working.
Thanks-
Myrla
Hey! We’re asking someting here. If you dont know the bug just say I dont know how can I fix this. You just write the post and shut your mouth. Please give me a answer.
it’s very cool,
but with a rolling menu ?
what do you thing we could have?
[...] LavaLamp [...]
Hi;
If you want the script to go to a link when you click one item,
change this line
$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});
with :
$li.click(function(e){setCurr(this);/*return o.click.apply(this,[e,this])*/});
OR if you dont wanna comment anymore and wont require:
$li.click(function(e){setCurr(this);});
Im using Minifies version.
Other version’s line number to be commented is 75th…
Good plugin by the way.
Thanks
Hi;
If you want to set an item as selected when you go a new page, you can set that item’s class as “current” and then initialize the lavalamp function.
You must do it before function is initialized. Function sets the first item as selected if neither was set as current class. If any item is set as “current” class, then first item with “current” class current becomes selected…
If you want an item to go to a link when you click, the post above works but disables callback function. If you want a clean solution, initialize function without sending a callback function like:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700
});
});
Thank you edit css menü
http://bloggeriz.blogspot.com/2009/09/lavalamp-css-menu-black.html
Lavalamp black Css menu
Thanks for your gr8 plugin.
How to use with submenus?
[...] Kaynak [...]
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] 11. LavaLamp menu effect [...]
[...] 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 [...]
[...] that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Web Site Demo Download AKPC_IDS += "503,";Popularity: unranked [?] Share and [...]
[...] Lava Lamp jQuery Menu. [...]
Thanks . Works great.
btw what are the other effects besides ‘backout’??
what other values can fx have??
thanks for this. going to use it on one of our new sites.
thanks!
Warwick
http://www.ireckon.com
Guys. if you want to implement this excellent navigation in Wordpress, FIRST OR ALL check that you really included all the javascript tags in the header.php file. I mean, “jquery-(version_number).js” should be there. “jquery.easing.min.js” should be there and “jquery.lavalamp.js” should be there… I know, there’s one more .js in the zip, but you may ignore this one.
Now, these are the changes you should make:
In the jquery.lavalamp.js file: just replace this…
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
with this…
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
THAT’S IT!!
Hi,
Does anyone know how come, when the plugin loads, the back li is 100% page width and left = auto ?
gr, Mike
Hi. I have to thank you such an article.
[...] 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 [...]
Hi,
There are still issues with the code listed here running under IE6 – in that some of the items wrap and make the whole effect look rubbish.
Do you have a fix for this?
I found these links;
http://www.webdesignerforum.co.uk/topic/26778-internet-explorer-strikes-again/
(this didn’t work for me)
and
http://www.mail-archive.com/jquery-en@googlegroups.com/msg16227.html
Was this ever fixed?????
Any help appreciated!
Thanks,
ben
Hey thanks for the awesome info!
I’ve managed to get all the effects working but the links don’t work, in the demo up top and in the setup I’ve done, using Safari 4. Has anyone else had this problem? Any solutions?
Thanks!
Tom
Hey thanks for the awesome info!
I’ve managed to get all the effects working but the links don’t work, in the demo up top and in the setup I’ve done, using Safari 4. Has anyone else had this problem? Any solutions?
Thanks!
Tom
I’m having the same problem… Is there a fix for this?
[...] 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 [...]
This is great! I will think of employing this in my website!
I used the bottom style. So i have got the lavalamp working in firefox, opera and safari. But for some reason when i open it up in Internet Explorer, the size of the navbar shrinks and the bottom line moves off to the left out of the navbar. Anyone know something I can do besides troubleshooting?
[...] officiel: LavaLamp Tweetez-le !Partagez-le sur FacebookPartagez-le sur FriendFeedS'abonner aux commentaires de cet [...]
Would it be possible to add a nested list to it?