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.
Sorry i forgot to mention that my page does not reload, its all in tabbed content.
Incase anybody is having problems figuring out how to get the links to work, here’s the fix… On the header where you reference the javascript you have a little line that says this…
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
Change it to the following(simply replace the “return false” with “return true”.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
This is all in the html page you are embedding the nav bar in.
@Ganeshji #692
This did not work, I’m still trying to sort this. Do you have any other ideas? I’ve tried everything I can think of.
Thanks
Ashley
Hey guys,
Have you ever had an Internet Explorer 6 issue with the Menu. If I try this same page on my browser the Menu get’s cut completely and doesn’t work.
In firefox it works wonderfully and in newer versions of Internet Explorer as well… Any thoughts?
By the way, this menu rules!
[...] Read full 0 Comments [...]
I´m using the Lavalamp sliding menu on the same page as a jCarousel but it dont work together. When I´m not loading the “jquery.easing.min.js” the Carousel works but not the animation in the menu. Why is there a conflict? And what can I do to solve the problem?
You can view the page here, http://www.yatzy.se/om
its all in tabbed content.
Hi, I cannot believe I never saw this earlier – Ganesh this is without doubt the best jQuery menu script I have come across – looks awesome & works well in all browsers too! Compliments go out to you!!
thanks for post
thanks a lot
I have a problem. I wanted to fix hyperlinks, i changed “return false” to “return true”, but link works only once, I mean i click the link, new window opens and then when i want to click another link it is not work
yahooooo it works! i’ve just update version lavalamp_0.1.0.zip to lavalamp-0.2.0.zip !!) sorry for my english)
435. Roy. Thank you, links now working… phewwwwwwwwww
[...] LavaLamp for JQuery Lovers es un código de JavaScript implementando la librería JQuery con la cual podemos hacer un menú al estilo de Flash. [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
nice post…thanks
beautiful, nice inspiration, keep up the good work!
I like lavalamp effect very much and ? used my project. You see: http://www.yomvakum.com, thank you so much.
thanks
[...] Demo Visit [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
@John W #734, #735: Thanks!
@Daniel #740: I Guess too large
@Dink #744: You can do it by changing the plugin source. I am sure it is pretty straightforward. Look for hover events, and instead change them to clicks. You don’t have a way to change the event from outside the plugin
@Rohan #748: You have to use your server side code to decide which page you are currently in and set the class=”current” in the “li” of that particular element before the page is rendered to the browser. Take a look at Thinkrite Website for inspiration
@Umirza #750, #751: Can you host a test page somewhere and direct me towards it?
@Tyler #752: Thanks Tyler for helping out the community. I think i have answered the question like a 100 times.
@Brandon #754: I have noticed the problem in IE6 too, just am too lazy to fix it… It is just a matter of minor hacks to the CSS for IE6 to make it work in IE6. In fact Thinkrite website functions perfectly alright in IE6. So, the plugin itself is right, it is just a matter of some CSS tweaking make the menu look alright in IE6. Have fun.
@Marcus #756: I believe it is working now. What was the problem?
@Gav #758: Thanks!
@divone #760, #761: Glad you got it working…
@OgrenmeNesneleri #768: Great job. Nice implementation. Usages like these are my inspiration to develop more… Have fun!
Hello
How can we implement these functionalty in asp.net menu control
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
[...] 11. LavaLamp menu effect [...]
[...] LavaLamp for jQuery lovers! | Ganesh http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers – view page – cached This is Ganeshji Marwaha's personal web site. My personal projects, technical articles and blogs will be showcased here. — From the page [...]
[...] Lava Lamp. Para un menú con un efecto muy dinámico de fondo. [...]
If anybody else is trying to get this to work in Wordpress and having problems keeping the current page active, rather than defaulting to the first menu item..
Cory’s Place blog has a great tutorial on what you need to change in the lavalamp javascript so that it works with Wordpress’ wp_list_pages() or wp_list_categories() in your nav bar
http://hekimian-williams.com/?p=146
@John W #734, #735: Thanks!
@Daniel #740: I Guess too large
[...] 2. Lavalamp Navigation Plugin [...]
Thank you, you answered the question I have been searching for which was whether or not to place keywords when blog commenting.
[...] 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 there! Really f**n’ nice plugin. I use it in http://spoonk.eu.
I’ve got only one question:
How to make my links to be bookable and to use history buttons on browsers? I try with return true; but it only shows the link hash (#about-us or #web-design) and if I try to type it on address bar points to default (selected) link?
How can I hash all links and use it to share them upon messengers, affiliates, etc?
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
Rabimba, Thank you!!!!
click: function(event, menuItem) { return false;
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] LavaLamp for jQuery lovers! [...]
How do I setting the current 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 [...]
Great script, I’ve added the .current class to my li, but what do I need to add to the CSS?
Thanks
[...] Lava Lamp jQuery Menu. [...]
props ganesh! i really am liking the way you developed this code. really fits my logic. the tweak i am having a challenege implementing is having a state where there is NO “current” . in my case, this is my main nav BUT my default page that loads with the lava lamp menu will not be referenced in the lave lamp menu.
i tried an additional class (noShowLava) that i attached to an empty . the only css in this class was display:none, also played with visibility. i was getting choppy lava images on the mouseOut when “current” was still set to the empty .
it feels like this should not be a complicated effort to implement, but i’m amateur at best when it comes to web dev. hoping that there is someone out there who finds this tweak a good challenge and is willing to find a solution.
many thnx to all u kick ass developers
peace and love,
jc
“… that i attached to an empty li class=”current noShowLava”.
Hi!
How i can add a dropdown menu when the mouse is over?
Thanks!
Great script, thanks.
nice plug-in but i have a problem here. im trying to implement this in my master pages but i cant seem to get it to work. got any ideas? just in case, please email me back for the specifics
thanks again ganesh
Yes, how do you get it to highlight a particular menu item as being the page the user is currently looking at?
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.