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.
Please give me the solution..
Thankss
Hi..the script is super….. but When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the directions….
thank you,i like it!
I will try this out.Looks cool.
Hi,
Can’t get the hyperlinks to work without taking out the attribute, can you help?
Cheers,
Jake
Hi,
Can’t get the hyperlinks to work without taking out the link attribute, can you help?
Cheers,
Jake
I will try this out.Looks cool.
[...] LavaLamp for jQuery lovers! [...]
For the people who would like to use this example, do not forget to delete callback function, otherwise hyperlinks won’t work.
Really wonderful information. Keep more posting..
Please let me no how to make horizontal menu like this.
Please sent me Example Link.
Please
Regards
SUSHIL KUMAR
Delhi India
Hello, i have used this script into my website the effect works but links won’t working. You know what i mean when i click on a particular link eg:about it’s not showing the about page instead of that it sticks in the same old page. Am i doing something wrong!
Hey, there is a problem whit JS on Opera 10.51 (Windows). Try http://www.meethod.pl/provitao
Can you point me where the callback function is. I face the same issue with the hyperlinks.
Found it, got it to work.
Where can I find the callback function??
[...] LavaLamp for jQuery lovers! [...]
Why can’t anyone help me
(
I just don’t know where I have to delete the callback function so links will work!!!
Please help me!!!!
for everyone who does not work:
in the file .html, at the baginning of the script:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
you must replace “returne false” with “return true”
enjoy
ps. I think the admin should write this rules directly to Article
by
Gianlu
I’m new to jquery but I really love this script, could someone who has it working please send me the script files, css and any other files that it needs to work? It would really help! Thanx
Email: blakefinley94@gmail.com
I have resolved the problem relative to the Highlighting of the “button” in a current page.
you must change the htm page in php page and in the ul list you must add this code:
<li class="”> Home
<li class="”>Pics
<li class="”>events
<li class="”>contacs
enjoy
sorry…
I re-write the code:
ul class=”lavaLampWithImage” id=”1″>
li class=”"> a href=”index.php?pagina=home”> Home
li class=”"> a href=”index.php?pagina=tabelle”>Pics
li class=”"> a href=”index.php?pagina=tabelle”>events
li class=”"> a href=”index.php?pagina=contac”>Pics
I have omit some caracter “<"
ul class=”lavaLampWithImage” id=”1″>
<li class="”> a href=”index.php?pagina=home”> Home
<li class="”> a href=”index.php?pagina=tabelle”>Pics</li
argh!!!
this blog hidden the ph p code!!
<li class="”>Pics</li
sorry for the spam , I ask the admin to fix the post
thanks
[...] http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
ok i solved it in another simple way,
just add class=”current” to the li of the current page
ie.
you are in home >>
li class=”current”> a href=”home.html”> Home
li> a href=”page1.html”>page1
li> a href=”page2.html”>page2
Great script, thanks!
@Maha Qd no need to change the code manually for the current page highlight to work, you can do that with a bit of jQuery
var theUrl = window.location.href;
$('a[href="'+ theUrl +'"]').parents('li').addClass('current');
@Ganeshji Thank you for sharing this great script.
I’ve been scanning through your site. You have some nice posts on here, especially this one – I really liked it…nice post. Consider yourself bookmarked
You realize that this is not compliant with IE 7 and IE 8. It’s broken
very nice menu
Great script. Just one question though. Is there a way to change the color of the .current item back to the normal up state when hovering over another li?
For example my lava.gif is green. The .current color is white, the ul background is white and the li’s are gray. When I hover over li’s the lava.gif moves away from the .current li so I’m left with white on white.
Any ideas for a solution would be most gracious!
TThank you for the great script
Hi..the script is superb and i like….. but When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the directions…
send it to my email: ylax26@gmail.com
Thank you for a really great script.
I have been able to ensure the current page stays highlighted by using
Home
I have to list the menu items on every page for this to work, whereas prior to using this script my menu was inserted on every page using
If I make changes to the menu, I have to change every page, whereas before I only had to change masthead.html.
Is there a way to include the menu from masthead.html, but have the current page highlighted on the menu?
Andy said “no need to change the code manually for the current page highlight to work, you can do that with a bit of jQuery”
var theUrl = window.location.href;
$(‘a[href="'+ theUrl +'"]‘).parents(‘li’).addClass(‘current’);
But where should this jQuery script be added?
Thanks for any help.
[...] Lava Lamp jQuery Menu. [...]
Hello,
Its very nice scripts btw but quite seems old.
Now I have jquery easing 2 scripts to load, and its make your scripts conflict. Can you help on this ?
Thanks
Raff
ME parece muy bueno este menú lo voy a comenzar a usar en los nuevos sitios que haga.
Muchas gracias!!
Will it work for Asp.net, I have tried effect is coming correctly but on click I am not redirecting to any page.
Please help.
Tenks admin you power blog cammozaik.org
Thank you for the information your provide.
Hi, I really like this script! I changed the CSS to match my site and it looks and works great!
(http://www.trapscreato.com/test/lavalamp)
There was one problem I’m experiencing… I looked through your code and couldn’t seem to find anywhere that you can specify which tag you can start on. Suggestions? Thanks in advance!
Seth
Oh boy, do I feel dumb… Sorry, I didn’t see the other 1000 comments! I’ll just be quiet now…
[...] LavaLamp [...]
[...] 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 [...]
This seems works but the current visited is not focused, its focused only first menu.. pls give me the solution
I have a question. When i link my work, they do not work!!!??
WHY!!!!???
Hello
I’m integreated the application into my website. Everything is working fine, even when I click on the links, they change the color, but clicking on them has no function. The links doesn’t work. Can somebody help me out, what I’m doing wrong? What is missing.
I would like to use it, but how?
Thanks in advance