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.
I use this on all my sites, but am having a problem.
I have a header.php file, with the small script in, and the list, and that’s then on all my pages, which call it.
How do I get the bar to stay under just the page I’m on?
I couldn’t see from the sliding door example..
I’m quite a beginner so no jargon please
You can view a tutorial on how to incorporate this into drupal 6.x by going to http://www.rawdesigners.com I’ve had trouble using the most recent version of lavaLamp and Easing.
see i loaded the lava lamp but there is a problem i cannot understand , there must be a css conflict of something else, because it is showing the menu bar but not the effects
thanks
anyone ever use this and in IE the effect goes backwards? For example, you run over the first link and the background color goes away from your mouse instead of to it?
Thank you!
oh – my website is http://student-promotions.co.uk
thanks…..
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
Great menu! JQuery is incredibly powerful. I was amazed when I saw a sample of the tools slide on Apple’s web site made with JQuery and it was so simple! I can not believe it.
Thank you for sharing the code…I love the style.
kamal says bismila walhamdolilah this is great work man
Can anybody find quicker than I can why it’s not working on my blog?
http://ocmexfood.blogspot.com/
I’m pretty sure I have all the elements in correctly.
Thanks you. byee
Hello,
How can I change text color when the “lava.gif” is under text? I have dark background and white buttons. I want white links for all menu itmems, without active button (the link must be then black).
Regards.
Hi, for hose repetitive questions asking how to activate menu link please take time to read previous replies you find a lot of answers just take time to read. More power to Lavalamp and Ganesh such brilliant thanks for sharing! I have problem how to activate the menu too, just so I read the prevoius replies and i got he idea i hope you understand my point. Right Ganesh?:)
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! [...]
yeah it is good
Hi Ganesh, Is there a solution to this menu so that it works in Opera as well? (opera 7)
Love this plug-in, stunning!
Here is a quick heads up for all those wanting to use the version for jQuery 1.2.x with an AJAX application, in order for it to tick on the selected link you need to open up the lavalamp.js file, and change this
$li = $(“li”, this),
to this
$li = $(“li a”, this),
This may mess uo your styling a little, so just make sure you have added your padding to the a element, and not the li element
This should now stick on click for an ajax app
hope this helps
[...] 11. LavaLamp menu effect [...]
Hey, I came across your blog in search for a lava lamp menu. I downloaded the demo.zip and since it worked out of the box, I tried to implement it in at my blog(developmental theme – http://judepereira.com/blog/?wptheme=cleanskies). I have all the files but the effect just does not seem to work. Any probable errors that I may be creating?
Does anyone now to change the font color with the rollover has landed on the anchor. I cant use CSS cause it changes too quickly.
hi everybody, hi ganesh,
i’m trying to build a wordpress theme that includes the lavalamp navigation. if i’ll be able (hopfully with your help) to modify lavalamp menu to make it work in wordpress, i’m going to post a tutorial about how i did it, so others can reproduce this with more ease.
this is what i’m trying to get accomplished
- a lavalamp navigation where the first list item is not current on default (the trick mentioned by ganesh #537 where you advice tristan #508 doesn’t work [at least not for me]) i would like to see this work because i have other pages like sitemap or terms & conditions. so having my first list item turned on would be confusing and improper.
- my wordpress navigation is split in two parts. one for all the parent items (in my header) and the other for all the children (sub menu, sidebar). i would like to see lavalamp to be able to keep the parents current when on i’m on child pages. Wordpress assigns the following list item classes automatically to current list item in the navigation.
current_page_item (the current page)
current_page_parent or current_page_ancestor (the parent or ancestor of the current_page_item)
here is where i’m at:
i don’t know how to write javascript or jquery and i just started working with it. i have changed the following code in the jquery.lavalamp.js from this
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
to this
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
because wordpress assigns current_page_item automatically to the current li. i also DELETED the return flase; function from the following, in order to make the links (href’s) work.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 600,
click: function(event, menuItem) {
return flase;
}
});
});
now here is the problem that i’m experiencing
as i mentioned befor, i have split my navigation in two parts. if i now click on a child item (submenu item), the current parent item turns back to default (first list item).
what i need help with
- i need the current_page_parent or current_page_ancestor to remain current when on child pages.
- and i need the default list item to be turned off when i’m on pages that are not within the parent or child navigation.
it’s probably (at least i hope so) just a few more lines of jquery awesomeness that is missing here. thanks for all your efforts since at least 2007 when you posted the lavalamp navigation and of course for your time reading my terribly long explanation. oh, by the way i’m using jquery library version 1.3.2. i have tried it with the library that you provided with the zip file but it doesn’t seam to make any difference.
many thanks
marc
Thanks. Thats amazing. Only 700 Bytes.
Finally I got it working. But there’s still a problem: the border does not allow the menu clickable. Please visit http://judepereira.com/blog/?wptheme=cleanskies
Wow thanks, I was just looking for that effect for jquery
perfect menu thanx
take a look at: http://judepereira.com/blog/archives/194 . it’s been modified to run on Wordpress themes…
Thanks for the menu… My idea came from here!!!
Hi there, I’m no coding wiz so I would like to know if there is a step by step tutorial to make this plugin work in a wordpress theme. I lavalamp-0.2.0 folder but do exactly don’t know what to do with it. I have made the all fixes thanks to hekimian-williams.com, but I just don’t know where to place codes and don’t know how to make theme communicate with on another. Like I said I have no coding experience so forgive my knowledge base.
Woow good menu thanks..
Hello,
I am using this on my website. I am having a problem when I go to my blog, instead of switching the current to BLOG the slider stays at home. My blog is on wordpress in a separate directory than my index and other main pages. Thanks for any help you can give.
nevermind. found it. ty
I love it, thanks. I’m haveing one issue though. It seems that I can’t click the links in IE7. The problem is obvious, the “.lavaLamp li.back” image is on top it will not obey the z-index in the css. That or the “.lavaLamp li a” is not on top for the same reason. It works great for me in the demo but not on my page. Do you know of anyway to force it to work anyway? I used noConflict() but no help. Thanks in advance for any help.
Thank you very much.I am using this on my work.
[...] LavaLamp effect is an excellent technique to turn the navigation to a flash like animation, it was originally written by Guillermo Rauch for Mootools and somebody had written a nifty LavaLamp menu for jQuery. [...]
Hello,
I am trying to add this to my wordpress theme (http://justinledelson.com/portfolio/sandbox/wp/). If you look, there are a few bugs, first the lava blocks out the text. I want it to just change the bg color and the link color. Second, If you click on a link, the lava will go over it fine but if you hover over a second link then move your mouse off, the lava will stay where you moved your mouse off and not return to the current page.
[...] LavaLamp for jQuery Lovers WP Trick JavaScript, jQuery, Tutorial, WordPress ??: ???? [...]
[...] ???? [...]
[...] Validation Masked Input Modals & Overlays Boxy Thickbox Colorbox Nyromodal BlockUI Navigation Lavalamp jScrollPane Ui Tabs Tags: boxy, cycle, grid, growl, scrollable, table drag and drop, tooltip, [...]
Hi, i’ve try to put some real link in demo page downloaded from this page, but links don’t work with any browser, anybody know why?
can someone help me with a small tweak that i havent been able to figure out?
how do i make this so it uses 2 lines? i have too many menu items and they dont all fit on one line
thanks…and yea this is really cool
@jusin you can make static pages using wordpress and also separate the blog/post on your website you can check my site co i think that is what you are looking for.
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
@ronald – I need help with making it so the lava dose not block out my text.
@MiD-AwE #584 : All seems to be fine in IE 7. I am able to click the link. Can you show me a demo page where i can check your problem out.
@Jusin : I guess you are trying to use lavalamp on wordpress. Since, i personally dont use it on wordpress, i am not sure abt ur problem. But friends out here have found solutions for the same. Hope their solution helps. Just look in the comments.
For all those who want this working on wordpress blog @Jude Pereira has come up with the solution. Thanks a ton @Jude Pereira. Look in comment #576 and #579. http://judepereira.com/blog/2009/05/04/pp-lava-lamp-nav-for-your-wp-blog/
@patrick #573 : This has nothing to do with lavalamp. You can use jquery normally to change font color on hover slowly using jquery’s hover function.
@Krishan Rodrigo #569 : As far as i know it works in Opera. I have verified only in 9.x though.
[...] 8. LavaLamp [...]
I too had the same problem (Link not working)
But it was solved by call a function loadEasing(e) onclick
and pass the link into that function as argument. Simple
eg:-
function loadEasing(e) {
location.href = ‘pagename.php?var=’+e;
}
[...] 11. LavaLamp menu effect [...]
[...] ????: LavaLamp for jQuery Lovers [...]