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, awesome file! Only thing is that is that when you rollover a different link, the link or the color itself kinda disappears when you’re viewing it in internet explorer. I’ve tried to browse through some of your comments but I wasn’t quite successful.
Any help would be greatly appreciated!
http://www.virtualtouchmedia.com/v2, is the location of what I’m working on.
hi,
How would you create a sub menu or sub lists under any of the main lists in the nav?
Thanks a lot for the wonderful information
[...] LavaLamp [...]
This guy has some interesting suggestions as well:
VEGA YAZILIM, RECEP YILDIZ, WEB TASARIM, e-ticaret,web design,SEO Arama Motoru Optimizasyonu
Sleeping once in awhile is a good idea. ;D
Awesome… This is what I was looking… Here ends my search…
Thanks a lot for the wonderful information
I am using lavalamp in a schoolproject atm. But when i click on a menu-item, the page doesn’t load. So the lavalamp effect works, but the actual linking to pages doesn’t work. How can i fix this?
Hey Lowie, I have the same problem.
Hey Jos,
i just found what the problem was.
$(function() {
$(“#menu”).lavaLamp({
fx: “backout”,
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
I included this in my html. But the return false is causing the problem. So if you return a true in stead of a false it will work
[...] 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 [...]
Hello,
I got trouble with implementation of this script i’m wondering maybe someone could help.
So on my website i have using Jquery 1.4.1 and JGrowl plugin for notifications.
When i include jquery.lavalamp.min.js and jquery.easing.min.js JGrowl popup stop working.
I fond that Jgrowl stop after including this file jquery.easing.min.js
I have no idea why… maybe someone could help ?
Here You can download jgrowl
http://plugins.jquery.com/node/11908
Regards
[...] 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 [...]
Hiya, i’am trying to get this working with a custom font, the underline bar is too big until i hover over an item then it is the correct size any ideas how to fix this?
Cheers Jack
Any way by which you can control the position of the active item on page load… will be specifically useful in menu systems which have a current_item sort of a class attached to the active item.
[...] LavaLamp for jQuery lovers! [...]
[...] 11.) Build a LavaLamp Menu [...]
[...] il est facilement configurable grâce à la feuille de styles qui est fournie dans le package. Catégorie: Plugins JQuery | Pas de [...]
[...] 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 [...]
Same problem as Jack Watling :
I use a custom font in css using @font-face but it seems that the initial lavalamp bar width is set ‘before’ the font-face is applied, resulting in the bar being to wide until I hover another item.
Any idea how to fix this ?
Thanks
[...] ???????demo???????????????????? [...]
Hi I really like this menu, thanx a lot, but have a big problem, I have now used 2 days to try to figure out.
I have it installed on a blogspot site. It work well if the script are alone on the site , but if I have it together with a mootools script both of them will not work at the same time. The script I place last work well.
I am not a script expert. Hope somebody can help me!
Ok, bug with custom font was fixed using $(window).load( function() { … } instead of $(function() { … }
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.
Thank you..
[...] [...]
Hi,
can this script is use with table structure. means can I use tr td instead of ul li.
Thanks.
[...] [...]
Hi I hope it is ok I ask again..I have cind of got a hang ut that I really want the lavalamp installed. As asked 2 days ago. I have trouble with jQuery and Mootools conflict. I can not get them work together.
Anyone, any solution? I am not an script expert. Again thanks for the super cool script
The best tutorial.
I know its post long time ago but really helps.
Thanks again!
[...] 11.) Build a LavaLamp Menu [...]
Thanks for the great effect with lavalamp. Unfortunately in IE8 it is not working. Did you experience problem in IE8?
This is too cute and cool. Shakedown 1979, cool kids never had the time.
[...] The jQuery LavaLamp navigation plugin is essentially a port from a Mootools which can be found at http://devthought.com/cssjavascript-true-power-fancy-menu/, however the jQuery version is available at http://gmarwaha.com/blog/?p=7 [...]
I can’t seem to get my links to work in any browsers. It’s almost 4am, need sleep I am sure this is an easy one. If I remove off one of the links then it works. So from this
Services
to this
Services
It’s still within the ul but not sure what it’s conflicting with, any help would be great.
Crap, didn’t realise that would happen
If I remove the li tags then the link works.
[...] Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
Hi,
can this script is use with table structure. means can I use tr td instead of ul li.
Thanks.
[...] LavaLamp for jQuery lovers [...]
[...] LavaLamp for jQuery lovers [...]
[...] Lavalamp for jQuery Lovers | ?? [...]
Thank You so much for the real LAVA…
It’s Looking Fantastic..
links for 2010-03-18…
Common Queries Tree (tags: development webdev database mysql list tips queries) LavaLamp for jQuery lovers! | Ganesh (tags: webdev javascript j…
[...] 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 [...]
[...] Demo Visit [...]
I have a problem with the JQuery Lavalamp menu, so when i add another li for the list of menu, it not work, it work only with 4 li, what i want to say that only the first 4 li which appear in the menu, the fifth will not appear… It will be so nice if any one can help me, Excuse me for my bad english, i have a problem with the english language too, but i’m a lovers for jquery lavalamp menu
$(function() {
$(“#menu”).lavaLamp({
fx: “backout”,
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
This seems works but the current visited is not focused, its focused only first menu.. pls give me the solution
[...] ???? «???? ?????» ?? jQuery | ???? ?????? [...]
here is the css:
.lavaLampNoImage
{
position: relative;
height: 29px;
width: 820px;
background-color: gold;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampNoImage li
{
float: left;
list-style: none;
}
.lavaLampNoImage li.back
{
border: 1px solid #000;
background-color: red;/*#e6e8ea;*/
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a
{
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
/*text-transform: uppercase;*/
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited
{
border: none;
}
Hi… When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the solution..