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.
[...] 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 [...]
Please in future tutorials make sure that it’s possible to get them working by cutting and pasting the content into an empty page. I’ve spent 2 hours trying to get this working and it clearly doesn’t.
It works perfectly.
you must copy all files to root directory
(http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp-0.2.0.zip),
and modify jquery.lavalamp.min.js with the next sentence:
Locate this:
$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});
Replace with:
$li.click(function(e){setCurr(this);});
Works OK!! in page empty and page with a lot of table and td’s
Hi,
I love this script, but i keep having one problem with it.
In IE6 and IE7 the background starts on the left of the monitor screen instead of left of the , probably has to do with the positioning (absolute anyone?). Is there a workaround?
Cheers
I seem to have a minor, inconsistent problem with the lavalamp. Occasionally when I refresh the page or first go to the site, the lavalamp is shifted and covers almost the entire selection area, slightly offset (http://www.creativefrequencies.com/temp/Picture%202.png).
When I move my mouse over the selection area, the lavalamp “wakes up” and starts behaving like it ought to (http://www.creativefrequencies.com/temp/Picture%201.png)
Sorry for the rough graphic trims – hope you get the idea.
Any suggestions as to which code I should be looking at? I’ve been poking around CSS for quite some time now, but can’t seem to figure out what it’s making it do this – especially since it’s inconsistent.
Thanks for any help!
[...] Lava Lamp jQuery Menu [...]
[...] Lava Lamp jQuery Menu [...]
[...] 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 [...]
Really cool. Having problems on clicking the link. Doesn’t do anything if I update the list href. When I hover over, it shows the correct link. Ideas?
Hey
How to make “current” menu with your plugin when you use wordpress?
I tried few things, but no luck.
Thanks!
beautiful
Hi Ganeshji,
Just wondering if you have worked or are working on a solution to keep the image state active when on a different page. We of course do not want to put the current class on all different pages.
If someone can provide a php script for me to make this work it would be greatly appreciated…i’ve gone through all the comments and noticed a few people got it working on the server side.
Thanks for the amazing plugin!
for who want to initialize the menu with specified position (for example, the highlighted menu item is the second item instead of the first one) .. do the following:
1. extend the function paramters and add itemNumber, make the default item is 0 (first menu item)
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
2. modify the function after that to make use of itemNumber
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[o.itemNumber]).addClass(“current”)[0];
and now call the lavaLamp like:
.lavaLamp({ fx: “backout”, speed: 700, itemNumber: 1});
this will make the second li item is highlited
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.
<?php
if ($thisPage=='home')
{echo 'Home‘;}
else
{echo ‘Home‘;}?>
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.blueprintdesigners.co.uk
Thanks for the reply MAMO!
For Wordpress users you can find multiple solutions to highlighting the correct page here — http://codex.wordpress.org/Dynamic_Menu_Highlighting
[...] 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 [...]
LINKS DON’T WORK
everything looks great apart from the fact that the pages don’t change.
I have tried MAMO’s idea but this has failed.
Any ideas??
In the demo you will find return:false in the jquery function. Remove this for the links to work.
Any plans to update this to work properly with jQuery 1.4? I tried it quickly and the hover effects stopped working. I just got things running, so haven’t had a chance to run through it yet.
[...] Lavalamp for jQuery Lovers | ?? [...]
thansk for you admin
I have the same problems of ats and Daniel (messages 1013 and 1023 respectively).
The links worked only in IE8.
for who want to initialize the menu with specified position (for example, the highlighted menu item is the second item instead of the first one) .. do the following:
http://sanalhayat.org/
1. extend the function paramters and add itemNumber, make the default item is 0 (first menu item)
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
2. modify the function after that to make use of itemNumber
$li = $(”li”, this), curr = $(”li.current”, this)[0] || $($li[o.itemNumber]).addClass(”current”)[0];
and now call the lavaLamp like:
.lavaLamp({ fx: “backout”, speed: 700, itemNumber: 1});
this will make the second li item is highlited
http://sanalhayat.org/
Any thought on how to use multiple images? I’d like to have the same effect you use on this site, the centered image. But also an image on either sides of the centered one. In other words, I’d like the menu to look like a square block with a pointer at the bottom center of that square. Any ideas?
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. How can I get the hover image to stay on the menu item while I’m hovering over the submenu items?
Thank you!!
Hi Ganesh,
This is really nice one… how can i implement this query ? am using asp.net… if possible anybody tell me plz
thanks by,
Vishnukumar SR
[...] jQuery Lavalamp for jQuery lovers(and everybody else): Otro efecto para los menús de una web con estilo. [...]
Hola (hi):
i need then menu change to down not to left or right pleas
sorry for my english!!
thanks!!
Awesome. Just what I was looking for.
first of all the script it’s very nice. i have a problem, it enters in conflict with another script in java also – lightbox – and it cancels it(lightbox) in totaly. is there a way that i can make them work at the same time?
AJAX support
I figured out how to get it working with Ajax requests…
make the changes to the lavalamp javascript file:
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[o.itemNumber]).addClass(“current”)[0];
Then load the lavalamp in Javascript:
$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700, itemNumber: 0 })});
This sets the default itemNumber to 0
But here’s the problem… When you want to call an other lavalamp with a new itemNumber it leaves traces of the previous call behind to fix this is easy, assume that you have already determined which itemNumber should be, make a function that you call after linking like…
function lavalamp_move(newItem) {
$(‘.back’).remove();
$(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700, itemNumber: newItem });
}
The switch and case (or array) statements for determining the itemNumber based on the page are up to you. I don’t currently have it working on the site that I’m linked in this post but it will be soon, so check back. You would just call it from your link handler with lavalamp_move(3);
Replacing 3 with the proper number
[...] 11. Lava Lamp [...]
Hi folks,
this lavalamp plugin is really great, but I`ve got a problem which makes me crazy.
You can see my test page under http://www.kuskus.de/lavalamp
It all seems fine, but the links don`t function and as a non-programmer I bet that I made an essential fault, which I am not able to see.
It would be so kind, if s.o. could get me a hint.
THX alot in andvance
Duffy from Germany
aha, all tutorials concerning the lavalamp seem to be made for coders and not only poor webdesigners. So if you poor webdesigners got the same problem, change in the code below “return false” to “return true”. thats it.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
now the plugin starts to make me realy happy
Duffydodo
[...] usare il Lavalamp in uno dei nostri progetti, ma esistono due versioni una per il jQuery e una per le MooTools, peccato che io usi prototype (testato con Prototype JavaScript framework, [...]
Thank you for the wonderful plugin!
Also thank you Duffydodo. I spent ages looking through the Javascript code; didn’t think about even looking at the block of Javascript in my main page haha.
[...] Este es uno de los mejorsitos, crea un efecto “slide” muy lindo. Lavamp [...]
Hi, tried to get this to work a while back. The effect worked great on a single page, but when I clicked from one page (say index.html with a menu item: HOME) to another page (say about.html with a menu item: ABOUT), bubble would show behind the HOME menu item on page load and not behind the ABOUT one.
Am I missing something here?
I’d like to get the bubble to show on page load behind ABOUT when I’m on about.html, HOME when on index.html etc.
Hi, I tried to get this to work a while back. The effect worked great on a single page, but when I clicked from one page (say index.html with a menu item: HOME) to another page (say about.html with a menu item: ABOUT), bubble would show behind the HOME menu item on page load and not behind the ABOUT one.
Am I missing something here?
I’d like to get the bubble to show on page load behind ABOUT when I’m on about.html, HOME when on index.html etc.
ade, what your trying to do is waht I wanted and I have it working, but it still adds the “.current” class to the first link. What you can do is code “.active” into the of the ACTIVE page so it becomes and then change “$li=$(“li”,this),curr=$(“li.current”,this)” in the minified JS file to “$li=$(“li”,this),curr=$(“li.active”,this)”
the only problem is, is the .current still gets added to the home link.. and i dont know how to remove it yet.. does any1 know how to get this working the correct way? or how to remove the current link from the first li?
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
Hi Jay,
I’m glad you understood what I was on about. That sounds like a way of doing it, but I’m sure there must be something simpler that we’re probably both missing.
Surly this plugin must be meant to do what we’re wanting it too already, I think everyone using it would want it to behave like this.
Can anyone out there help?
)
The the easiest way to determine the quality of the custom thesis writing services was to order some the hottest mini dissertation about this good post from the dissertations writing services.
ac?gölden yay?n yapan ve ?u anda tüm dünyay? kasip kavuran bir radyo ac?göl fm herkes davetlimdir.
acigol fm acigolfm acigol fm acigolfm acigol fm acigolfm acigol fm acigolfm
Hi,
Possibly stupid question, but -
will jCarousel Lite work in wordpress selfhosted?
Thanks
[...] 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 [...]
[...] using jQuery Very fancy style of menu design using jQuery. Gives your menu a feel like it's a Lava Lamp. Very well explained and easy to integrate [...]
thanks admin
this is very good. thanks