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.
good thanks my site http://www.merkezcity.com
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface [...]
Thanks ! but… it’s doesn’t work with prototype’s library !!???
i tried using this it was really simple but the links dont seems to work..however openning a window by right clicking and opening in new window works…is this the problem with this plugin
Yes, the links just don’t work when clicked… is it a bug? How to fix it?
Anyway, I like the way it work though…
[...] 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 [...]
I have incorporated the lava lamp i downloaded from here into my site in dreamweaver. I set the links and everything, but when i test it in a browser and click on one of the buttons, it doesn’t go to the page i pointed it to. Help?
Thank you very much, my job was very useful
Hi guys,
First of all, great tutorial! I learned allot from it and ended up with a great plug-in for my sites.
Then for all of you having problems with the links not working and after clicking letting the effect stay on the one you just clicked on:
@ Linking
If you use the code directly from the download you end up with the following call function in your HTML:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
If you remove the the following part, linking should work again:
click: function(event, menuItem) {
return false;
}
@ Current one
Just include class=”current” on the li you are currently on, like this:
Plant a tree
Well, I hope it helped, good luck all!
-Mark
How do you set a css properties for ‘current’?
I want to change the font color as well for the preselected link.
Tried adding this -> .current {color: #555555}
but does not work. Any ideas?
Hi Seu,
Do you mean you want to change the color on hover or when clicked on, being the current link? Because from what I see, the current class is created on instant from the Lavalamp jQuery script, so that way you can’t use it in CSS if I’m correct.
-Mark
Yes, I notice that the .current class is not in css file but contained within the .js file. I wonder if its possible to insert an inline styling there then?
[...] 27. LavaLamp Menu [...]
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Navigation dosent work. can i find fully fucktionall package?
or how to fix it?
@ Sue: I don’t really know how it should work, but I know a Dutch site that also uses this technique. And whilst you hover over the other buttons, the current one gets underlined. I did not yet figure out how they do it, but I will let it know if I understand it!
@ Tim: Read the comment above to make your navigation work!
-Mark
[...] demo visit [...]
Hey Ganeshji,
Great work & also technical support
I checked all the answers and couldn’t find the solution for this:
How can I display the CURRENT selection only when my mouse is ON the menu? In other words, I need to be able to hide the selected item by default, and show the menu non-selected.
Thanks.
Cy
Yes! I found what I wanted, that option is enabled in a newer version I haven’t seen before.
Here’s the feature I needed, in case anyone else was looking for the same > http://nixboxdesigns.com/demos/jquery-lavalamp-demos.html
Have a nice day
Hey
my links dosent work.. and i cant find solution for it.
Can somebody but working demo code or even better download package some place!
Is there a way to evenly space out the navigation links? Does jQuery have an easy way to do this?
Hi i was using lavalamp and it was working fine….but when i started using overlay form the firebug started to give an error “.lavalamp is not a function” .The code which i used is given below :
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$(“a[rel]“).overlay({
expose: ‘darkred’,
effect: ‘apple’,
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getContent().find(“.contentWrap”);
// load the page specified in the trigger
wrap.load(this.getTrigger().attr(“href”));
}
});
$(“#1″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Please help me out anyone
[...] LavaLamp [...]
http://lacan.com/wordpress/?p=18&cpage=1#comment-16611
[...] 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 [...]
[...] 6. LavaLamp for jQuery lovers! [...]
There is a bug When using jquery 1.3.2 AND the returnDelay method..
You will get an JS error, after the timeout.
U can fix this with the code below:
Replace
function move(el) {
if (!el) el = ce;
WITH
function move(el) {
if (!el || !isNaN(el)) el = ce;
Hi does anyone know if you can modify this code so an image icon will hover/slide above the menu as an indicator? I have some javascript in a hidden sub menu already – not sure if this is why I’m having trouble. Any help would be very much appreciated.
Hey, i’m implamenting this on Blogger. It works fine but it doesn’t set the current list item correctly.
NFL jerseys
Hi- I’m trying to have the current page highlighted using PHP. I’m pretty clueless when it comes to SSI- I know enough to use header.php and footer.php.
My lavalamp menu is in the header.php file:
How/Where/What do I need to be able to have the current page selected in the menu when I am using php?
Here’s the site:
http://www.prodentite.com
Thanks!
Hi- I’m trying to have the current page highlighted using PHP. I’m pretty clueless when it comes to SSI- I know enough to use header.php and footer.php.
My lavalamp menu is in the header.php file:
How/Where/What do I need to be able to have the current page selected in the menu when I am using php?
Here’s the site:
http://www.prodentite.com
Thanks!
Thank you for this nice menu. This will make our work easier.
Wow, this is very “flash like” but totally simple for those familiar with Jquery. Great for learning web designer such as myself. Thank you and your inspiration.
[...] ???? LavaLamp for jQuery ???????????????LavaLamp for jQuery??????????????????????????????????????????????????? [...]
Thanks . Works great.
Hi and thanks for this great work.
I start work with it and found one problem whith google chrome.
It’s not a error or program mistake.
In case you load new page Chrome load the page, and update it only partial. Means only parts that have changed. It don’t see the change with li class=”current”.
So I reload the page, but the wrong menu is selected.
Has someone any experience with?
With actual Safary, IE 7-8, Firefox 3.5, Opera 10.10 it work fine.
Only Google Chrome make this mistake.
Oh it was my mistake. I have forgot to clean the cache.
But still one Idea: what happen if I want to show the menu but none have to be active/current cause I am not on one of these pages?
Good tutorial. However, the regular left-button click does not bring up the url under the button, you have to right-click on the button and choose open the url or open it on a new page or new tab. Is it normal by design or my browser has problem? I have tried Firefox and Internet Explorer. Help please!
Thanks!
– Kang
I love the plug-in, thanks!
However, how do I make it so that when a user clicks one of the highlighted links it actually reloads in the current browser window with a new .html page? I do this…
——
click: function(event, menuItem) {
if(menuItem.id == “resume”)
{
alert(“resume”);
}
————————–
get the alert box (for testing purposes), but I want a different .html file to load in the current browser window? I’m new to Javascript and this is quite annoying! Any help would be awesome!
good work buddy., really appreciate ur work !! and thanks .. continue this …
[...] 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 [...]
Hi,
First great article, really helped me out a lot. I have one question though: I am currently using the “underline” variation and would very much like for the blue bar to be exactly as wide as the text (not as the li-item). But obviously the space between the menu items should remain.
I cannot seem to get my CSS fixed the right way in order to achieve this. Could anyone help me out here?
Thanks in advance!
Thanks for the great plugin!
I’m having some problems with the css however – I wan’t to add extra space between the li elements and also some more padding, but when I do the ‘lava’ ends up slightly to the right and/or below the element (I’m using the lavalamp without images). Anyone who’s worked this out?
[...] Lava Lamp jQuery Menu. [...]
Looks nice, but the code isn’t efficient at all.
[...] Lavalamp (Demo – Descarga) 2. MenuMatic (Demo – Descarga) 3. Slick Animated Menu (Demo – [...]
thanks
[...] [...]
[...] 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. [...]