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 can anybody help me, im trying to set the selected tab when i go to a new page within my site but cant figure out how to do it. Im new to jquery so im finding it quite confusing.
links in element not works
and yes i have my file in the same directory, but don’t works… why?????
links in element \Test\ not works
and yes i have my file in the same directory, but don’t works… why?????
[...] Lava Lam jQuery Menu [...]
@naitmeir #654: If you browse through this comments section you will get an answer for it pretty easily. Anyways, the link doesn’t work because in the test, I have hooked into the click event for lavalamp and returned false. So, when initializing the plugin, please “return true” when you pass in the function for the browsers default behaviour to work
@Kmac #652: As far as the selected tab is concerned, it has nothing to do with jquery itself. Your server-side language is the key here. From you server-side when you spit our HTML to the client side, check for which page you are going to spit out and depending on that, set the “current” class for the appropriate “li” in lavalamp. Hope that helps. Browse through the comments section. You may find helpful replies for your server-side language
[...] la démo du menu ou le télécharger gratuitement du code source, c’est ici. 0 [...]
[...] la démo du menu et le téléchargement gratuit du code source c’est ici. 0 [...]
700 bytes !!!. That is amazing. Congratulation.
so smoooth! so hot! so lava!!!!
[...] effect when you hover the menu. Ported from Mootools to Jquery. Get it here. Read also idTabsprettyPhoto Post To:Digg Facebook Yahoo! Buzz Email PREVIOUSidTabs [...]
Hello,
Great menu, have it up and running np. One quick question, is it possible to change the behavior of the menu? Instead of the background box sliding to the menu item on mouse over I just want the box to “warp” from it’s current position to the new menu item. Also instead of having it just disappear from the previous menu item have it’s color change to a “transition” color like grey or something.
Thank you!
@Nnyan #661: Pretty much possible. Of course it is not possible in the present version of the plugin. If you try and succeed kindly do let me know.
[...] Lavalamp | Demo [...]
Hi guys!
First of all congratulations on this great Menu!!
After playin’ araound with it, i had the idea to combine the Lavalamp manu with the Superfish menu and i think it is goin’ okay (work still in progress…).
The only problem is though (and that’s why I am posting this here) ist that when you hover over a menu point with the superfish menu it does collapse, but when you go with the cursor over the now superfish navigation – the Lavalamp bar above just floats back left.
Here’s an example: http://www.corporatelook.de/superlavafish/demo.html
Is there any way to stop the lavalampbar from moving, when you move your cursor over the superfish navigation??
Thnx in advance!
Greetz,
Tkay
@Tkay #664: Nice attempt. Hmmm, regarding your question, you might have to hack into the code a little bit. It might not be as straight-forward as it may look. I am using the jquery hover() event to determine the lava movement. Now, in the process of integrating these 2 plugins, you might have to see if you can change this part of the code to be triggered not on mouseleave event, instead on some trigger that comes back from superfish saying that the mouse has left superfish submenu. Hope that helps
[...] for more details check this link: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ Comments [0]Digg [...]
[...] 8. LavaLamp [...]
Thank you for information
[URL="http://www.darsane.com"]darsane[/URL]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]
Probably not the best place to post this problem, but maybe someone has encountered this.
I implemented the Bottom Style menu on a Joomla 1.5 site which uses the mod_mainmenu module. Anyways, the first time you visit my site or if you hit the “reload” button on your browser, the underline appears across pretty much all the menu items. The Lavalamp menu works if you mouse over an item but only the first time you visit the site or reload it, does this happen.
Any ideas? It’s probably related to Joomla’s caching system which I have turned off, but maybe someone else has encountered this.
The only mods I have made to the core files is changing the .current to .active in jquery.lavalamp.min.js and I call Lavalamp like the following:
jQuery.noConflict();
jQuery(function() {
jQuery(“#primary-nav”).lavaLamp({
fx: “backout”,
speed:800,
click: function(event, menuItem) {
}
});
});
Thanks for any help I get.
[...] In: JQuery plugins 20 Jun 2009 Go to Source [...]
700 bytes !!!. That is amazing. Congratulation.
jQuery.noConflict();
jQuery(function() {
jQuery(”#primary-nav”).lavaLamp({
fx: “backout”,
speed:800,
click: function(event, menuItem) {
}
});
});
? dont no soryy
Hello, first of all thanks for this great plugin, i discovered it from the 50 greatest jquery plugins chart on some other site and it really is
I have a question to ask. I dont have an index page link on my menu. So when the user is on the index page i want the sliding bar to hide when the cursor leaves lavalamp area. How can i achieve that? I tried creating a with its width set to 0, but when i do that, the plugin starts behaving strangely and that just doesnt look pretty.
[...] 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 [...]
nice Script – but the Links do not work!
Fantastic thank you. Find the files you are looking for at megaupload-download.com the most comprehensive source for free-to-try files downloads on the Web
Hi ganesh
lavalamp is very good effect, i am stuck at the point of hyper linking the “plant a tree” to HTML page. I am new to jquery. in the
Home
plant a tree
in this way it’s not working.
Ganesh please help me as soon as possible.
Thank you very much in advance
Hi ganesh
lavalamp is very good effect, i am stuck at the point of hyper linking the “plant a tree” to HTML page. I am new to jquery. in the
Home
(li)(a href=”plant a tree.html”) plant a tree(/a)(li)
in this way it’s not working.
Ganesh please help me as soon as possible.
Thank you very much in advance
Hi
I am trying to hyper link the one of the lavalamp menu buttons to another page. I used “(” instead of “<" because when i post the submit the comment it's taking them as HTML tags. Please help me.
(ul class="lavaLamp")
(li)(a href="#")Home(/a)(/li)
(li)(a href="Plant a tree.html")Plant a tree(/a)(/li) — this is not working please guide me in this regard.—–
(li)(a href="#")Travel(/a)(/li)
(li)(a href="#")Ride an elephant(/a)(/li)
(/ul)
Thank you very much in advance.
I used this on a website for one of the stores I work for. http://www.harvesttheboutique.com I’ve received tons of compliments. Thanks, Ganeshji, for the great blog. I look forward to seeing more stuff from you.
@Vibze #674: Sorry, at present the plugin assumes that if no “li” is marked as current, then the first “li” is automatically marked as current. You will have to modify that part of the plugin code to achieve what you want.
@Ravi #678: You will be using “return false;” in the bound “click” event. Instead return true. The links will start working.
@Joel Abeyta #681: I am very happy both you and your customers liked the plugin. Thanks for using LavaLamp.
Hi Ganeshji Marwaha,
Great work. Implemented lavalamp for one of our client http://www.risingindia.com/
thanks.
@Arulmurugan #683: Nice work. Makes me feel proud to have developed it. Thanks for using LavaLamp.
I used this menu and it’s really amazing but i have alittle problem that it doesn’t work with firefox so please can anybody help me???
will be using “return false;” in the bound “click” event. Instead return true. The links
Hi I have a little problem.
How I can set the starting point of the sliding “window”?
Great script! i have just one minor problem: using the lavaLampNoImage version, when i follow one of the LavaLamp link, the new page loads and the menu go back to the default menu (first one on the left). Where is my mistake?
Forget about my dumb question
i found the (li class=”current”)
I could really do with knowing how to do this as I have a second level of navigation (footer links).
[...] it was not in this menu but i had another top menu named as lavalamp i downloaded it from here lavalamp it is conflicting with the left category menu is ther any option i can fix it regards, Omer [...]
@Ashley #690:
Change this part of the code
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];to
curr = $("li.current", this)[0];That should do the trick…
Hi I have a little problem.
How I can set the starting point ?? help..
Hello, this is a very nice tutorial. Is there a multi-level option version of the lavalamp menu? Thanks.
hi
great plugin – thank you very much!
but i have a little problem:
http://4thcube.de/stuff/x/previewlava/
if i click on a menu item, the slider always moves back to the first link in the row when i move the cursor away….
in you demos it works – but i’ve no idea why it doenst work in my files, i didnt change anything afaik
help please =)
@rwc #695: You are trying to write functionality for the click as
$('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide().filter(this.hash).slideDown(350); $('div.tabs ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }Instead, you should write this in the click event that has been provided to you by LavaLamp.
$(".lavaLampWithImage").lavaLamp({ fx: "backin", speed: 190, click: function(event, menuItem) { // WRITE YOUR CODE HERE return false; } });@Dönertas #693: You can set the starting point by specifying class=”current” for the “li” that you want to start with.
@Hanz #694: Thanks for trying out LavaLamp. Sorry, but there is no multi-level version of the same available.
@Ganeshji Marwaha #692:
I tried that with no luck. Is there anything else I can try?
Ash
It looks like I’m getting an li.back in front of the first actual li link.
And also even if I just hover over the link it’s setting the current state on that li.
Thank you, it works well for me… now… about a cascading version…