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.
A…
I found it – “tue” instead of “false”
Shouldn’t this stand above? I guess many people don’t know that.
It’s not so clear..
Thx Sören, I’ve been looking for this hint, too. Thanks a lot!!!
very good
Finally Figured it all out! Thanks for sharing
http://www.andresfgarcia.com/que/
Sören where is this true instead of false???
I found it!! To everyone who is having link problems..soloution…. on your main page where your code is, you will see this line: $(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
change the word false to true!
It works….
Simple as that
very good
super thanks
very good thank you
when i click on any menu item and then when i come back to the same page by hitting back button, the square frame or the selection box is at the menu item which was clicked last. can we get it its original position?
Its really luky to find this blog,i fell so great!
Jordans i love it,i support you always!
the style always fashional!
passenger by sunglasses 2010
nice navigation plugin! ?
Anybody knows how to extend the bar width to auto? I changed the overflow property to auto but it did not work well.
got it from murugesan’s comment! Thank you murugesan!
Cartier replica
chopard replica
[url=http://www.patekphilippewatches.us/]watches[/url]
[url=http://www.patekphilippewatches.us/A.Lange-&-Sohne/]A.Lange & Sohne watches[/url]
[url=http://www.patekphilippewatches.us/Alain-Silberstein/]Alain Silberstein watches[/url]
Anybody knows how to extend the bar width to auto? I changed the overflow property to auto but it did not work well.
Thanks for sharing this important stuff
[...] jQuery ? LavaLamp????? ????????????????????????????????CSS?????????LavaLamp for jQuery lovers ?????????????CSS?????ZIP?????????????? [...]
I am trying to implement your menu in WordPress. So far so good, but what I am missing is a function to set the active option. As long as the page doesn’t refresh the solution given works fine, but the moment that PHP refreshes, it loses the option. I know the index, but I miss a function in your nice program like SetActiveOption what you can call with the index number. The menu is very nice. If you give me a hint on where to look, than I will tell afterwards how I used it in Wordpress (PHP not Ajax).
For those who couldn’t run this script on Joomla, here’s how I did it:
I changed from “current” to “active” in the file jquery.lavalamp.js
In the template I inserted this:
jQuery.noConflict();
(function($) {
$(function() {
$(“#lavaLamp”).lavaLamp({ fx: “backout”, speed: 500 })
});
})(jQuery);
That’s it.
Hi my question
If i have more pages( Home, portfolio, contact, order, etc) how can i set the current ex if i’m on contact page the current must be the contact.
Thanks!
Hi to all !
I have installed the lavalamp menu with CSS and it’s wroking fine with Firefox and Chrome.
But with IE, i cas see the menu but the adnimation (underline) stays on the left of the screen. How could I solve this please ?
Thanks for your help !
Crap, didn’t realise that would happen
If I remove the li tags then the link works.
Thank you very much. i gonna try it on my site
regards
awesome stuff
thanks for the great info
Good post. Thank you for this.
[...] Demo | View Source Code [...]
i like your script this srcipt is so cool
thanks for it
i like your script this srcipt is so cool
thanks for it
@ Cherryl “Everything works except when i navigate my mouse to a submenu item, the lavalamp background image flies right back to the “home” position and is much wider than it should be.”
Change menu.js in
[code]
$li = $(">li", this), curr = $("li.current", this)[0] || $("li.current last", this)[0] || $($li[0]).addClass("current")[0];
// met >li ervoor gezorgd dat alleen parent li het doet
$li.not(".back").hover(function() {
$('#navtop ul li.back').fadeTo('slow',1,function() {
// Animation complete.
});
move(this);
}, noop);
$(this).hover(noop, function() {
//move(curr);
$('#navtop ul li.back').fadeOut('slow', function() {
// Animation complete.
});
});
[/code]
Is there any way to modify this for a vertical menu?
Hi Ganeshji, Lavalamp is great! Thank you!
I’ve got one doubt and it’s the same that “#574 Marc” ask in this post. But I couldn’t find an answer.
And the blog http://judepereira.com doesn’t explain this case. And “Google” cannot offer a better place.
Can you help me?
Thanks.
I’ve implemented this technique on one of my sites and it works great. I’d like to convert it to a vertical nav menu for another site I’m working on. Can this be converted to a vertical layout? How could I modify this to accomplish this?
Thank you.
[...] creating the icon I refer you Ganesh article where you can learn LavaLamp effect with a step-by-step guide and also can download the [...]
Thx for sharing this
Great plugin……….
Please. How can I implement sub menu items. It seems obvious but I can’t.
[...] Demo | Tutorial [...]
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
hi!, how can I do to set the initial item selected? for example if I go to plant a tree page, then in the menu I want that the default item selected will be “plant a tree” instead of home..
thanks!
sir i am a begineer freelancer…using ur zip file i am getting this problem that i can not redirect to any page from the home page through the link. no doubt i hav given the correct href=”blahblah.html”…..
still cant link…..pls help
m same lokanath again …is there anyone to help out me pls
Hello there!
function on demo.html is:
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
for working links just replace function like this:
[ on end code at "return" replace fasle in TRUE ]
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
[...] LavaLamp for jQuery lovers! [...]
[...] LavaLamp for jQuery lovers! [...]
[...] 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 guys,
Has anyone been able to implement this with working links that also hold the place of the current nav item?
cheers
hello.. I am new in website designing. On the way to unearth the lovely world of web, I got you.. and loved your work. I am working on a website. I added your LavaLamp menu design. And I added a jquery content slider…. but unfortunately Lavalamp menu is not woking because of this file below..
please help me what to do and the solution…
Waiting for your reply…
plz reply on email address.
Thanks
Hello,
Great article . Works perfectly. But i have one issue..
When working with link like following code
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
The clicked menu is not seleted.Is there any way to select the current clicked menu.
Thank you
hridaya
@Kathryn (and many others),
The only way I could get it to work was with a switch case statement.
$(function() {
var tText = “Website Title – “;
switch (document.title) {
case tText + “My Page”: $(‘li’).removeClass(“current”);
$(‘li:eq(1)’).addClass(“current”);
break;
case tText + “Another Page”:
$(‘li’).removeClass(“current”);
$(‘li:eq(2)’).addClass(“current”);
break;
}
});
//Then you switch the value for return to ‘true’.
$(function() {$(“#2″).lavaLamp({fx: “backout”,speed: 700,click: function(event, menuItem) {return true; } }); });
//The list is like this
My Page
Another Page
Prost