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.
[...] is a great effect for a menu, with lots of easy customization. It’s called LavaLamp. (jQuery [...]
Very cool. But I think there is a missing closing } in the startup code. I get a JS error on that line.
[...] LavaLamp jQuery plugin provides a really nice effect for menus…and another reason for me to go get and play with [...]
This is really impressive, bravo!
@Hector – Thanks, It should be fixed now.
That is pretty darn neat.
[...] August 24th, 2007 — richmarr I was shown this excellent JQuery menu effect today, which reminded me what a mind-numbingly great Javascript library it really is. In case you [...]
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery plugin menu javascript effect sliding doors) [...]
How do you set the initial ’selected’ menu?
@Jackson Tomlinson – You can give a class attribute of “current” to any “li” that you want initially selected.
<li class=”current”><a href=”#”>Ride an elephant</a></li>
[...] LavaLamp for jQuery lovers! 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. (tags: animation javascript jquery webdesign css) [...]
[...] Lava Lamp Menu Hover Effect For jQuery (tags: Menus jQuery MooTools) [...]
very nice.
hey I was wondering if jQuery works with a linux server? mootools does not and i was wondering if there was any luck with this one working as intended? and if yes, then how?
I don’t see any connection between jQuery (or mootools or any other javascript library) and any server for that matter. These code get executed on the client side – on the computer in which the browser is running. So, as long as you have a browser that supports javascript, these libraries should work. I may be approaching your question completely wrong. So, clarify with more detail, if my answer didn’t make any sense.
Lol…Did you heard about FancyMenu?? Google it:P
)
@Bdesign – Yes, LavaLamp is a port of FancyMenu(written in mootools) to jQuery. I have mentioned it in the credits section of this blog entry.
Sorry for kinda being vague – what i meant was that when testing my website offline (using mootools library) this menu showed up perfectly fine. However, as soon as i uploaded it to my server (running Linux if that means anything to why this isnt working) it just showed my links on the left and does not seem to execute the java whatsoever
I wouldn’t think it is the Linux Server, because, my website is hosted on a linux server and as you can see it works just fine.
Only thing, i am able to think of is, there could be some problem with the paths and the difference between paths in the local machine and the remote server.
thx a lot
I use GoDaddy Hosting (the Deluxe plan, which includes Java support and abilties) and i called them and they said my bar isnt working apparently because they dont support the “module” i’m using. Is this correct? I am using mootools and they said that jQuery should probably work over that. I just want to make sure jQuery wil work so that im not wasting another couple hours perfecting the image files and changing the colors and fonts and labels in photoshop.
[...] know how to write it yourself find out at the author’s page or download the package above which includes several working [...]
[...] JQuery ile yap?lm?? flash benzeri ho? bir menü örne?i. Link [...]
@Tyler – I don’t think it has anything to do with the hosting account. If mootools works for you, then jQuery must and will. But, now that you have mentioned about mootools, i can see the problem. Both mootools and jQuery are javascript libraries and they both (like other javascript libraries) use the $ symbol for shortcutting function calls. So, typically when you use these libraries together they will clash with each other. The good news is that jQuery has a solution for this. You will have to goto jQuery site, or even google “jQuery noConflict” and follow the links. I am unable to give you the exact link, coz, right now i am sending you this comment from the singapore airport and the internet enabled machines is not allowing me to open more than one browser window. Once, i reach home, i will send you the exact link that might help you.
This is great!
Thank you!
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery javascript menu css animation) [...]
Ah no sorry, I wasn’t trying to use them together. As you know there are two versions of this menu bar: the mootools one and the jQuery one (your port). I used java and mootools ONLY for the menu bar for my website, uploaded it to the server and the java would not run whatsoever. Then, I removed everything related to the menu bar and mootools from my site, included your jQuery port, uploaded it and I still get nothing. I called GoDaddy and they said that they don’t “support it.” Now i find this hard to believe as it’s simply another linux server and i have enabled server side javascript. It works when i test it in my own browser offline, but as soon as i upload it – it doesn’t work online. Do you know why this is?
@Tyler – Do u really mean that u are using java for the serverside. If yes, then most hosting services out there don’t support java. Most of the hosting providers out there provide support for PHP, Ruby on Rails etc, but java providers are limited to a few. Examples of a few who support java are dailyrazor.com and supplehost.com. Hope that answers your question.
Manipage
but index.html doesnt opening why?
@mehmet – before i answer that… why do u need that? u can always use gmarwaha.com/blog.
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery javascript menu css animation effect plugin development design web fancy) [...]
[...] JQuery ile yap?lm?? flash benzeri ho? bir menü örne?i. Link [...]
What i want is for that bar to be displayed in my website. However, for this to happen dont i have to add all that html in my index.html page, the css in my style.css (instead of a separate stylesheet), and the .js files on my server? I mean, i test my site locally on my mac before i upload via FTP to my server and if it works on my mac shouldnt it therefore work on the server when i upload it? I’m assuming for the example bar i see above that you are using server side java or is it client side? (im new to programming and writing real code). thanks!
Perfect.. thank you so much
Lavalamp baby
hi
hmm i got it working but it’s a beggar to style. Trying to get it to center but it doesn’t want to play ball. Align left it’s ok but when you try getting it to center it won’t work..
Any ideas? pointers?
Thanks
There is a syntax error in the file jquery-1.1.3.1.min.js which prevents the links from actually working when you click them (even in the demos above). I’m not sure how this was missed but it appears to be some kind of quote/escape character error in this line:
if(a&&!a.nodeType)a=null;a=a||document;if(!t.indexOf(“//”))
The problem is the character sequence “//” which, if you look at it in an editor that supports syntax highlighting (like Dreamweaver), you’ll see that it’s treating this as a comment. I tried all sorts of things, like replacing // with / and various quote/escape character combos but I can’t get it to work right. Either the effect is lost or the links don’t work, I can’t manage to get both. I’ll keep trying & if I can figure it out before someone else, I’ll post it here. Thanks.
Okay, I have confirmed that it’s definitely a missing double quote character. What I did was search the file (Ctrl+F) for the double quote character and Dreamweaver counted 815. Since these appear in pairs, we’re missing one (should be 816). Now to find which one is missing!
Okay, so I was able to find the missing double quote character. If you replace this line:
new RegExp(“^([:.#]*)
with this line:
new RegExp(“^([:.#]*”)
it effectively uncomments the code that follows and causes the links to work. However, it also causes the effect (in my case the bottom border) to disappear! I counted the single quotes the same way and found 55 in the document. I was able to find the “extra” quote but this time I think it may be there on purpose, unlike the last one (RegExp takes a string argument, which should have been quoted using double quotes). Here’s the line that’s giving me trouble:
parse:[/^\[ *(@)([\w-]+) *([!*$^~=]*) *(‘?”?)(.*?)\4 *\]/,/^(\[)\s*(.*?(\[.*?\])?[^[]*?)\s*\]/,/^(:)([\w-]+)\(“?’?(.*?(\(.*?\))?[^(]*?)”?’?\)/
See it? First, the sequence (‘?”?) then the sequence (“?’? then again at the end the sequence (“?’?
Unfortunately, I’m not strong enough in regular expressions to tell if this is supposed to be this way or not and what if anything can be done to get the effect working along with the link.
Thanks.
Okay, sorry for posting a series of comments about this but I realized that I was wrong about the quotes. The line new RegExp(”^([:.#]*) is part of a long series of concatenated strings, so it’s correct, there’s nothing wrong with it.
However, the effect and the link still won’t work together at the same time (try clicking the menu items above, they should take you to this page, http://gmarwaha.com/blog/?=7# but they don’t).
This is an awesome menu but it would be so much better if it functioned as a menu!
Please help, all out of ideas. Thanks.
@Andy – Are u trying to get the entire menu to the center of the page? If that is the case, you can try the famous margin: 0 auto; technique for the ul of the menu. Or, you can give some margin left so that the menu appears towards the right(this is how i have brought it to the right in my case). Hope that helps.
@Carlo DiCelico – I have intentionally made the menu in the demo not to take to “#” anchor when clicked because then, if you are in the bottom of the page, you will be taken to the top unnecessarily while viewing the demo. Notice the “return false” in the callback function. This is what is preventing the menu from taking u anywhere. However, this is not part of the plugin itself, rather this is part of my code that gets executed when the menu is clicked. Hope that helped.
I couldn’t understand some parts of this article o.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
I would really apreciate a vertical oriented version.
Could it be possible?… or at least some tips to get it.
Tx.
Oh, okay…so I can just change the return false to return true? also, what part of the code is responsible for keeping the menu item clicked underlined when the mouse moves away?
Thanks a lot!
Could you please explain the setup of the gif image for the “with image” menu. I see you have bg.gif and lava.gif and that the lava.gif is actually to images saved as one gif (one above the other). If I want to use different colors what is the correct way to create the lava.gif image?
@Daniel – Most of the work is done using CSS. So, a good CSS resource would be the best point to start. As far as the javascript part is concerned, it should be very straight-forward. No more than the explanation in this article should be required. But for more information about jQuery, visit jquery.com.
@Julio – It is not currently possible in this version, but i am working on that and will be releasing the next version pretty soon. Keep yourself updated by subscribing to this rss feed.
Hi, I am trying your great menu out, and I changed the return from false to true in order for the links to work, but now the marker for the active link goes back every time to “home”, and I don’t want this to happen.
Can you please tell me how to preserve the original behaviour?
Thank you very much!
OK I think I know why this is happening…my links cause the page to generate all over again, so the startup function (“$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700}) });”) gets executed every time the page reloads…can this cause the back li to get to home every time?
How can I avoid this from happening?
Thanks!
Yes, how do you get it to highlight a particular menu item as being the page the user is currently looking at?