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.
WOW !!!!!
i looked a lot for this menu ~~~~!!
i really loved the short explenation !!
keep up the great work!
Hi there! This is a nice effect and plugin, but with one problem.
It doesn’t work with jquery-1.3.2.min. Is there a fix for this? I wanted to use with jQuery UI and I can’t get it working. Please get back to me if there is a fix. Thanks.
Hi Ganesh.
Ok, probably a really stupid question but here goes. I am using your awesome script and the way that I have my new website set up is using the pagescroll technique. I am not very good with javascript as of yet although I seem to have gotten everything with your script set up ok. I used the “current” value to place the “box” over the cooresponding link based upon what “page” we are at (I have several navigation menus within the site). But because all of the “pages” are actually just anchors, when I go to my profile “page”, the box is over the correct link but when I go from that page back to the home “page”, the box there is still over the profile link. And at that point, if I were to go back to the profile “page” then the box is now positioned over the home link. So basically what I am trying to accomplish, is after one clicks on the “page” they want to go to, the box always goes back to the link with the “current” class applied. Does that make sense? lol.
Here’s a link so you can see what I mean:
http://www.ideologydesign.com/new/
Thanks bro!
Hello, i´ve used the lava lamp without an image and in firefox works excellent. But in IE6 it doesn´t works at all, however in your website works well with IE browser. What did you do to make it work?
Thanks!
Thank You..
wow thanks
this menu system design is really awesome
I’m gonna go try it out for some of my client projects.
a little code snippet i created to make the links work – with framesets, even … it also takes care of people clicking beside the text
if (e.target != “[object HTMLLIElement]“)
{
top.frames[3].location = e.target;
}
Hi, awesome menu, I have used it on many of my sites. However, no doubt this question has come up before.
Is there a way to get this menu to work vertically?
How to make it work in that damn IE6?
I see the menu up here in this website is working. How does it?
Thank you very much.I am using this on my work
[...] that uses no special feature of Photoshop yet looks good. Also, I had long been waiting to add the Lavalamp sliding navigation. I plan to use as much of the jQuery javascript library as possible in my future [...]
[...] Lavalamp | Demo [...]
Great plugin! I added a small tweak for those who have a second level to their navigation (sub nav or just multilevel). Adds vertical movement to the hover.
function setCurr(el) {
$back.css({ “left”: el.offsetLeft+”px”, “width”: el.offsetWidth+”px”, “top”: el.offsetTop+”px” });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft,
top: el.offsetTop
}, o.speed, o.fx);
};
Hi Genesh, thank you for the great script!
I was wondering if there was a solution for this previous post that was made a while ago, cause I’m having the same problem.
Thank you
“I have everything working perfectly – except – the right side of the active ’s background. The background just cuts off as opposed to rounding off as it should. I suspect something is funky with the “.back” class in the styles but that’s just a guess.”
overflow: visible;
… fixes the problem with the cut off.
Thanks Martin for the help, I’ll try what you suggested.
i looked a lot for this menu ~~~~!!
i really loved the short explenation !!
keep up the great work!
Concerning IE6, here’s the problem and the fix:
The problem is with the Easing library and the “fx: backout / 700″ part of the code. Remove both and your menu will work roughly (no fancy springing background).
In the source code of this page, you can see that Ganesh doesn’t use the Easing library he points to, instead he uses http://www.gmarwaha.com/js/lib/lib.min.js !
Copy the second part of this file:
//// JQUERY PLUGIN – EASING
jQuery.easing blah blah blah
in a new JS file on your server, load it instead of the easing.min.js one, flush your cache and IE6/7 will be pimped again!
Notes:
- I tried the 3 versions 1.1, 1.2 and 1.3 of easing.js with no success before that.
- I use the version 0.2.0 of the plugin with jQuery 1.2.6, because my CMS named SPIP 2.0 won’t work with jQuery 1.3.x (for now).
@valerio and @joaquin: thanks for pointing out that the plugin works with IE6 on this page!
@Ganesh, many thanks for this port of the lavalamp menu (and the 0.2.0 version, even if I didn’t spotted it immediately
)! Could you please update this page with a working solution for IE6/7? (IE NetRenderer snapshot seems OK for IE8 too, though I haven’t installed this browser locally yet)
I was able to get LavaLamp to work with easing 1.3 simply by changing the fx name to the equivalent 1.3 easing name. “backout” becomes “easeOutBack”.
$(“#header ul”).lavaLamp({ fx: “easeOutBack”, speed: 800 });
And you of course want to make sure you are using easing 1.3 and not the include easing 1.1 which is available here: http://gsgd.co.uk/sandbox/jquery/easing/
I have tested it in FF3 and Safari and it works fine. I don’t see any reason why it wouldn’t work in other browsers.
Hope that helps.
Hey guys,
For some reason when I plug links into the list, nothing happens when I click on them.
Anyone have any ideas as to how to fix this?
The site can be found at http://www.dougbox.com/shop.
The code looks like this:
| home |
| products |
| about us |
| the dougbox |
| contact us |
Thanks for any help y’all can provide! This is really frustrating.
is it possible to implement tab navigation and dropdown ? it will be the ultimate css menu!
[...] 8. LavaLamp [...]
For Michael Haws:
try to delete this string: ” return true; ” from your code below.
I did something like this and now it works.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Also if you need then to get the right menu selected add this to the :
For Michael Haws:
try to delete this string: ” return true; ” from your code below.
I did something like this and now it works.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Also if you need then to get the right menu selected add this to the :
@Michael Haws
Obviously, you did not read the tutorial
. On the inline javascript(demo zip), there are extra lines there, remove it. That should fix your problem:
click: function(event, menuItem) {
return false;
}
regards
hey,
website not online yet. Lavalamp menu in place and operating correctly, but clicking the menu items does not jump to the next page. Any help?
On the page I gave – click the first menu item “Home”. you can see the URL in the browser’s status bar at the bottom, but the click action is not firing.
thanks,
@ John (myself LOL)
D’oh! my bad – just read Renn’s response below. working now
[...] 11. LavaLamp menu effect [...]
[...] 11. LavaLamp menu effect [...]
@michele #627: Yes it is possible to implement. It will take some effort though. I will probably giving it a try in my next web project. When I succeed, I will try and wrap it in a plugin and host it here.
@Renn: Thanks for helping out fellow jquery lovers here
@Felipe #619: Thanks @Sheldon #620. That is correct. Just replacing the name of the easing should do the trick
@N #615: Did what @Martin suggest work. I guess that should be the solution. Thanks @Martin.
@Chris #614: Nice work
@Valerio #610, @Joaquin #604: Does the demo download work in IE6. What problem are you facing.
@Gergely Marton #602: I haven’t tried LavaLamp with jquery 1.3.x yet. I will try it and get back to you in these comments.
I know this is the most common problem, and I’ve looked through pervious posts and none of it is helping me.
I have a header.php file which has the script and the links in it, I then include that file in each of my actual pages.
how do I get the box to stay on the CURRENT page?
I know it’s something to do with <li class=”current”…
but can somebody help a bit more, like say EXACTLY where to put it..?
my site is http://student-promotions.co.uk
@Alex Coady #632: Yes Alex! It is the most commonly perceived problem. The issue is that this is not a problem and cannot be fixed within the plugin. The solution lies in your server-side programming language. Regardless of what language you use, the final output you get is HTML. Make sure that the correct “li” gets the “current” class for your menu-item to be highlighted on page reload. For example, If the user has clicked on “Home” link, when the new page is loaded, make sure that the “li” corresponding to “Home” has the “current” class set. The same applies for all other pages as well.
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
[...] 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 . [...]
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
Hi Ganesh,
I am delighted to see the lavalamp plugin you have created.
However, I am having problems integrating it with my webpage which I am creating to learn Jquery.
The problem is coming because lavalamp is created using jquery easing plugin v1.1 and I’m using jquery easing plugin v1.3.
I’ll be grateful if you can modify the lavalamp to make it work with easing plugin v1.3.
Thanks
@Akash #637: LavaLamp will work well with both easing 1.1 and easing 1.3. You just have to change the easing’s name to reflect the 1.3 version. Another fellow jCarouselLite lover @Sheldon Finlay #620 has achieved it. Refer to Comment #620 for Sheldon’s solution.
[...] 11. LavaLamp menu effect [...]
I’m using lavalamp on my portfolio site but for some reason when I upload it to the server it doesn’t work although it works offline, any ideas on what I’m doing wrong?
Thanks for the deadly code!
@Barry #640: With the given information, I have no clue as to what could be the problem. Why dont you post your link here. I will take a look. For starters which version of jquery are you using locally and which version are you using in the server.
Hi Ganeshji. Sorry the link is http://student.dcu.ie/~walshba3/test/ I’ve only got it working on IE but no luck with FF. Thanks for the help!
I’m using Jquery-1.1.3.1.min
Hii
How can i add new menu items in the menu.
when i am adding in the menu the items goes in the next line and the menu gets scattered
Ganeshji: I love the plugin but it expands almost double the size in IE6. It works great in Firefox 3.
If you look at the Demo, ‘Ride and Elephant’ gets wrapped to 2 lines in IE6.
Workaround for me: Just widen the DIV wrapper to work well (with increased spacing) for IE6 users.
How to add sudmenu
made some tweaks and finally ….got a wonderful result in my site telecomtalk.info thanks Ganesh
[...] ????? [...]
[...] 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 [...]
@Barry #642: I am unable to figure what is going wrong from your website. kindly try to make what you are trying as small in scope as possible. That will tell you what you are doing wrong. I wish i could help
@Michael #644: Yes you are right. That is called the “double margin” problem in IE6. Kindly google it out. A hack in ur css will fix that problem. I am planning to do that myself sometime next week. Thanks for pointing it out
@fay #645: No, as of now Lava Lamp itself doesnt have submenu support.
@tarun #646: Cool, I took a look at ur website. Nice implementation of lavalamp. Makes me proud. BTW, one suggestion. Why dont u try “overflow:hidden”. The menu seems to go out of page when it reaches either corner. “overflow:hidden” will avoid that problem.
great tut’s,thank’s ganesh iwould like to work on it yaar ………..thanks………