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.
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] The Lava Lamp Effect [...]
This is really cool. I am just having one problem. When a page loads, initially the current menu item only shows half of the background of the current li. Once I hover over the current li it stretches out to normal (or the way it should be). I’ve only added the menu to one page as I am in the middle of constructing the site but you can see what I have done here. http://www.samclaytondigital.com/about.htm Any help would be appreciated.
BTW – I read through just about every comment and unless I missed it, I couldn’t find a solution.
Thanks again.
Just a couple of more notes about the problem….
1.)When I preview the page locally it appears fine. It’s only when the page has been uploaded to the remote server that the issue appears.
2.)Once you browser has cached the page. When you return to it later, the current li background appears correctly. If you clear your cache and then load the page again, the issue is back.
3.)The problem persists in IE and FF3.*
[...] 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 [...]
RE: Comments 1107, 1008, 1009
The problem seems to occur when I replace the anchor text for the links with transparent .png’s. When I use text links the lava lamp menu works great.
Any idea how to use transparent .png’s for the anchors for the links and still have this work? I would like to use a non standard font with a drop shadow and I need to use transparent .png’s to do so.
Thanks again!
Brilliant, I love it, thanks very much for sharing.
Thanks Oldu Sayende siteme beklerim
[...] LavaLamp for jQuery Lovers A “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
I’m having a problem.
So I moved things around a bit (Like, font color and font size), but now the links dont want to work. I noticed that in the sample you prove in this website, the links ALSO dont work. The links ALSO dont work on the Demos? The mouse changes to click a link, but when I click is like if I had never clicked it.
Please reply to me at my provided E-mail. Please use following subject title: “LavaLamp Site”
thanks sooo much in advice. Your gonna get good reviews if i get my help
the clicks doesn’t work!!! the menu have something wrong whit the code, please someone review it and post the solution, anyway the menu its great but it’s a shame that isn’t useful
[...] ???? ???? VN:F [1.7.8_1020]please wait…Rating: 0.0/5 (0 votes cast)AKPC_IDS += "358,";Popularity: unranked [?] [...]
For everybody: I have been trying to fix the problem of the links (because doesn’t work) but i can’t find the problem in the code…
But the good news is tha i found another version that it works
Look here: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
I tried that and it works!!!
[...] LavaLamp is a latest release jQuery Javascript menu based on the original design of fancy menu by Guillermo Rauch. It is a Web 2.0 style smooth sliding nifty effect menu with light weight code and extra two more interface styles. You can free download the full source code file here. Besides last month we had a popular roundup of CSS based navigation menu, check it out for further reference. [...]
[...] you wanna English tutorial, please visit LavaLamp for jQuery Lovers. ??: WordPress ??: jQuery, LavaLamp, mg12 ??WordPress [...]
its nice. jquery is very power full
cool script! thanks a lot!
Its so so cooooooooooooooooooooooooooooooooooooool
Dude, AWESOME! thanks for this
-Question tho with the links tho. When you click on the link the link should stay highlighted with the rollover image. Im working on ASP page that calls from a default template page with dynamic links. How do I make the rollover stay and not go back to the home page(default.aspx) each time?
Thanks Administrators
thanks
thanks..
[...] Lava Lamp jQuery Menu. [...]
[...] Lava Lamp jQuery Menu. [...]
Very nice, very simple. Thanks mate!
[...] Lava Lamp jQuery Menu. [...]
[...] LavaLamp for jQuery Lovers [...]
thanx 4 ur kindness. But links are not working…………..
When i click on the hyper link its not working how to solve that problem?
[...] Lavalamp for jQuery Lovers | ?? [...]
[...] Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
You’re awesome, that’s all I can say
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
[...] LavaLamp for JQuery Lovers es un código de JavaScript implementando la librería JQuery con la cual podemos hacer un menú al estilo de Flash. [...]
Hello,
I love the simplicity of this plugin but am having trouble incorporating it into my tabbed menu. I have it loading & expanding ot size but it will not move. Please feel free to contact me for any info! Any help is great.
Thanks very much!
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
[...] LavaLamp Navigation menu with a ‘lava’ 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 [...]
[...] ??? Context Menu Functionality ???Another Context Menu 8 ) LavaLamp jQuery ???? [...]
i love your tutorial…but i wonder why your demo worked at ie and firefox. but when i integrated at my site, it looks horrible in internet explorer 8… any advice? or am i just plain stup?
Links are not working, what about it?
thanks!!
as Suleyman Vardar said, links work with this:
—-
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
—-
for the current page link, just add this class to the
great!
[...] Lava Lamp – Lava Lamp by ganesh is yet anather jquery menu, with cool sliding effect in the background, [...]
How can I make a dropdown feature for this amazing menu? Is it possible???