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.
Hello,
First of all,I apologize for my bad english.I’m trying to figure out how can I change the font color of the button when I make hover and when the button It’s active.
.lavaLampWithImage li a {
font: bold 14px Georgia;
text-decoration: none;
color: #fff; <—
If I try to change here it changes for every button.I want to have a color for the button that is pressed / hover / active and another color for the rest of the buttons.
thank you
[...] 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 [...]
[...] ????http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] Endnu en klassiker, LavaLamp menuen. Jeg har dog aldrig forstået [...]
Great plugin!
For anybody who is using this with WordPress: You can easily get the menu to highlight the current page by adding a line of jQuery before the lavaLamp() call.
jQuery(“.current_page_item”).addClass(“current”);
I thought this was going to take a lot longer to implement. Hope this saves someone some time.
T.
[...] navigation, j’ai utilisé Lavalamp Menu, un très bon plugin de messieurs Guillermo Rauch et Ganesh Marwaha qui permet de façon simple et avec énormément d’options disponibles de créer de biens [...]
thank you…
k?zl?k bozma
Is there a way to do a javascript call to move the highlighter from an event on another object?
For example, say you have a map and the menu just lists locations on the map and if you mouseover the location I’d like the highlight to move to the corresponding menu item. I was easily able to do the reverse and have the menu item to also highlight on my map but not the other way around.
For this example I’ve tried using
$(‘.current’).removeClass(‘current’);
$(‘#menu-north’).addClass(‘current’);
without any luck. The class does change but it doesn’t move the highlighted menu item.
Nice looking tool however clicking the links in the menu does nothing. Not much purpose for this eh!
At the top change “return false;” to “return true;” in order to get your buttons to link to your other pages!!!!!!!!!!! it works!
[...] 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 [...]
In order for it to hold the current place you will have to modify the the class and add current.
So for home:
Home
Other Link
And for other link:
Home
Other Link
This can be achieved multiple ways. You could use a small chunk of code that gets the page title and uses that to display the current page. You could use a series of server side codes such as PHP, but that might be a bit of a hassle. If you have the menu pasted on each page you can simply edit the page. Wordpress has functions that will tell you the name of the page, so you can use that.
[li class="current"] Home [/li]
[li] Some Link [/li]
[li]Home[/li]
[li class="current"] Some Link [/li]
lavalamp widget on every coolest blog?
Hello!
First of: Great use of jquery and lovely tutorial!
I was wondering whether or not there are any terms of use? I’m building a site for public use and would like to use this navigation, anything i should be aware of?
thanks for subject
thanks a lot
Thanks For Information. LavaLamp is Good i need more Jscript
hey the url is not working…even if i place any url it does not go to
another page…check it
yes the url not working did anyone fixed it, i want plzzzzzzzzzzzzzzzz
mmmm the url dont work, somebody has the solution ?
To activate the url links, open your html with menu code and change:
click: function(event, menuItem) {
return false;
TO
click: function(event, menuItem) {
return true;
and it will work!
Hi?Thank You For Your LavaLamp?
I find if I want the menu up or down moving?not right or left?
Then How can I change?
“SOLUTION TO DYNAMIC CURRENT PAGE LINK
Hi Peeps I don’t know if this solution has been posted already but I have found a solution to the most common question here regarding the current link. The problem is by adding a ‘current’ class to the you lose the ability to have the navigation links as an include.
Heres the solution:
Right at the top of eache of your php pages add this bit of code:
‘Home’ will be reference to the homepage therefore replace ‘Home’ with the name of the otherpages respectively.
With this technique you can still have all the navigation in one include.
You put each in a chunk of code which tells the browser if we are on ‘home’ then use . Look at the example below.
if ($thisPage==’about’)
{echo ‘About‘;}
else
{echo ‘About‘;}?>
Big hand to the developer! If if this is unclear I don’t mind going through it step by step as I know how frustrating it can be – http://www.sprike.co.uk”
RE: That’s is a great solution and has helped me get out of my misery
Nice one, thanks for this.
To show the effect only by hover:
return this.each(function() {
var me = jQuery(this), noop = function(){},
$back = jQuery(), /* change this … initialize */
$li = jQuery(“li”, this), curr = jQuery(“li.current”, this)[0] || jQuery($li[0]).addClass(“current”)[0];
* … to this */
me.hover(function(){$back = jQuery(”).appendTo(me).css(‘opacity’,'0.6′)},function(){$back.remove()}); /* css optional */
…
Many greetings
Matu
[...] LavaLamp for jQuery lovers! [...]
For those of you using Wordpress and trying to get this to work with the “current” page item, open the jquery.lavalamp.js file and replace this line:
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
With this line:
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
[...] This tutorial will help you create an absolutely beautiful navigation menu, that slides the background image to the hovered navigation item. Amazing, and powered by jQuery. Read on Ganeshji Marwaha's blog » [...]
[...] a massive thank you to the team over at gmarwaha who developed the lavalamp menu, its [...]
Very nice plug in. Had a little bit to work to apply for my vertical menu which I enjoyed. But I’ve two sets of menu in a page. It is working with only one of them. Anyone has any idea that how can we use this multiple times in a page. Any suggestion is appreciated.
ta
[...] 5: Lava lamp liquid menu Menus look great with some movement. This adds a very fluid transition effect between menu items. View Demo [...]
thanks for sharing. good informations. good luck. best regards
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
hi this is good plugin but i ahd a problem with firefox when i click back button of browser easing effect not working but class current is working
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
thanksss
the links don’t work
Hi,
I am trying this great script together with the dynamic drive accordion menu. Which uses jquery 1.3.2, as soon as I upload that Jquery the LavaLamp looses its smooth movement, any solution to that behavior?
[...] ?????? LavaLamp ?? DEMO?http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
good job…
looking for code with dropdown menu don’t find any links ,examples..
any ideas, links?
thanks
I am trying this Lavalamp jscript.But not work button link.how to create a button link.
If your links don’t work, please goto html page, find script below and change “return false” to “return true”
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
“SOLUTION TO DYNAMIC CURRENT PAGE LINK
Hi Peeps I don’t know if this solution has been posted already but I have found a solution to the most common question here regarding the current link. The problem is by adding a ‘current’ class to the you lose the ability to have the navigation links as an include.
Heres the solution:
Right at the top of eache of your php pages add this bit of code:
‘Home’ will be reference to the homepage therefore replace ‘Home’ with the name of the otherpages respectively.
With this technique you can still have all the navigation in one include.
You put each in a chunk of code which tells the browser if we are on ‘home’ then use . Look at the example below.
if ($thisPage==’about’)
{echo ‘About‘;}
else
{echo ‘About‘;}?>
Big hand to the developer! If if this is unclear I don’t mind going through it step by step as I know how frustrating it can be – http://www.sprike.co.uk”
RE: That’s is a great solution and has helped me get out of my misery
Hi,
I have small problem.
When I click on menu item and reload the page, so menu is “reseted”. (active item is selected first menu item, but I need to have selected actuall item)
How can I set it right?
Thx
[...] LavaLamp for jQuery lovers! | Ganesh [...]
Just wanted to drop a note for anyone looking for Superfish integration. I was puzzling over it for a while the other day, and if I remember correctly, it only took a very small change in the code.
On line 63 (non-minified), try changing $li = $(“li”, this) to $li = $(“>li”, this)
I tried a lot of things, so there may have been something else I did as well, but I believe that this was the solution to lavalamp + superfish.
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library [...]
Plz help me ,i use jquery lavalamp for site ,very good ,but , if my rerdiect link page on site , bg on page dose not active
plz
Hi, i really like the effect and i’ve got it to work for my site but when i click the nav links they don’t work. It’s as though the ‘a’ tag has been disabled.
Thanks again for tutorial, any feedback would be really appreciated.
I forgot to mention, when i disable javascript it the links work again. My digging through the code can’t find the ‘a’ disable code though.