LavaLamp for jQuery lovers!

LavaLamp for jQuery lovers! August 23rd, 2007

Hey there! If you are new here, you might want to Subscribe to the RSS feed! This way you'll never miss an update!

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.

Posted in Client Side, Javascript, Jquery | Respond | Trackback.

1,425 Responses to “LavaLamp for jQuery lovers!”

« 1 … 10 11 12 13 14 15 16 17 18 19 20 … 29 » Show All

701. Conn3ct on June 30th, 2009 at 6:49 pm

Thank you, it works well for me…
702. Stefan on June 30th, 2009 at 11:06 pm

Everything is fine, just I can’t make the links work.
Do I miss something? They don’t work even if I just download your zipped file and add links instead of #.
Please advice.
703. Stefan on June 30th, 2009 at 11:20 pm

I just found the solution in post No. 41.
The keyword is to replace the return false to true.
Thank you, Ganeshji!
704. Tavla on July 3rd, 2009 at 1:19 am

Thanks for a post.
it was exactly what I need really.
705. Leandro on July 4th, 2009 at 1:55 am

Hi!
can I use and modify this code on a site that I get money from him?

Thanks
706. Ganeshji Marwaha on July 4th, 2009 at 6:04 am

@Leandro #705: Sure, but you should leave the credits section intact even in the modified code. That way you can legally modify this code and use it on a website that you develop for a paying client.
707. Ganeshji Marwaha on July 4th, 2009 at 6:10 am

@Stefan #702, #703: Glad, you got it working and thanks for trying LavaLamp.
708. Bertan ucar on July 5th, 2009 at 3:42 pm

Hi!
can I use and modify this code on a site that I get money from him?

Thanks
709. Ganeshji Marwaha on July 5th, 2009 at 6:04 pm

@Bertan ucar # 712: Yes. As long as you preserve the credits section and the license agreement.
710. Ben Carr :: This Site on July 6th, 2009 at 12:31 am

[...] menu is done using the jQuery Lavalamp Plugin. The jQuery javascript library is fantastic and is used on all of my sites, in one way or [...]
711. eddie on July 6th, 2009 at 4:55 am

does it work with jquery 1.3.2 or not? thank you
712. Mike Smith on July 7th, 2009 at 8:26 am

I am trying to use this on a new site of mine but am running into a small issue:

How can I get the text color to be different on whatever li item the lavalmp is currently hovering over? I know a:hover is normally how we could do it, but with the lavalamp hovering on “home” I’d like to have that a diff. color as well (and change when I am no longer hovering over it.

Any solution for this?
713. Ashley on July 7th, 2009 at 10:06 am

@Mike Smith #712

Not sure exactly if this is what you want but I’m doing:

.lavaLamp li a:hover, .lavaLamp li:hover, .lavaLamp li a.active
{
color:#f00;
}

And set the active class on the anchor:

Templates

This will change the colour of the nav text on hover and when it is active (current).
714. Ashley on July 7th, 2009 at 10:09 am

Damn it actually posted the link.

It should be:

(li class=”current”)(a href=”/templates/” class=”active”)Templates(/a)(/li)

Obviously ( and ) should be
715. Ashley on July 7th, 2009 at 10:12 am

Sorry yet again, it just won’t let you post html without it actually rendering.

You should see what I mean by using ( and ) though!
716. 15 jQuery Tutorials For More Interactive Navigation on July 7th, 2009 at 1:23 pm

[...] Tutorial [...]
717. Mike Smith on July 7th, 2009 at 5:48 pm

@Ashley (713-715). Thanks for posting. I tried and had it, but when the hover goes off the “current” li, the color stills stays white, while it should be switching to black (any hover’d item is white text with a blue image bg, while the other items are black text on a light bg).
718. Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net on July 8th, 2009 at 10:58 am

[...] Tutorial [...]
719. Ganeshji Marwaha on July 10th, 2009 at 9:42 am
@MikeSmith #712: You can try the CSS based solution as Ashley suggested or you can use jQuery solution itself.
```
$("li a").hover(function() {
  $(this).addClass("hover");
},
function() {
  $(this).removeClass("hover");
});
```
Then you can style “hover” class with whatever color you want. This should solve your problem.

@Ashley: Thanks for helping fellow jCarouselLite lovers by sharing your knowledge.
720. Ganeshji Marwaha on July 10th, 2009 at 9:52 am

@eddie #711: LavaLamp works perfectly well will jquery 1.3.2. Just download the given zip file and replace the version that it includes with the version 1.3.2 of jquery and check it out for yourself.
721. Serge on July 10th, 2009 at 2:50 pm

Dear Sir,

First of all, sorry for my english and thank you for your work. lavaLamp is realy great !

Is it possible to change the « selected item » with an « onclick » event (attached to a simple HREF tag in the page) ?

For you information, i’am a junior in jQuery

Best regards,

Serge
722. Ganeshji Marwaha on July 10th, 2009 at 4:14 pm

@Serge #721: I understand your requirement. But sorry serge, it is not possible with the current lavalamp plugin. This requires change to the plugin code itself.
723. ???240??jQuery?? « Lamtin'Blog on July 10th, 2009 at 6:59 pm

[...] 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 [...]
724. 200+ jQuery?? « liwad on July 11th, 2009 at 1:32 pm

[...] lava lamp jquery menu. [...]
725. 20 Excellent JavaScript Navigation Techniques | For Technical Information on July 11th, 2009 at 7:43 pm

[...] 8. LavaLamp [...]
726. Serjik on July 12th, 2009 at 6:33 am

Nice work! I’ll have to do a cross post on this one
727. babak on July 12th, 2009 at 9:44 pm

This is a wonderful script. Really well done!

I’m hoping a CSS genius can help me a bit. I’ve put together a test menu at . I basically CSS’d the menu to have the active indicator part of a long bar and then moved certain menu items under the bar by assigning a special class.

Two things I can’t figure out:

(1) Is it possible to float right the set of menu items under the menu while keeping left justified the set of menu items above? I originally did this by creating a left and right set of divs, but could only make it work by having two instances of the menu (one left, one right). I want only one menu that goes all the way across, but to just right justify the bottom set.

(2)I can’t figure out how to contain the orange bar within the gray nav div. It’s absolute positioned so that I can force it down to the right height to coincide with the status indicator. But that makes the 100% width tag force the bar to be window-width, rather than div width.

Any help appreciated!
728. babak on July 12th, 2009 at 9:45 pm

Oops — the commenting system removed the URL I posted. My test demo is at www dot morebutter dot net slash lavalamp
729. evden eve nakliyat on July 15th, 2009 at 8:16 am

Nice work! I’ll have to do a cross post on this one
730. Jens on July 17th, 2009 at 9:31 am

Hi – it’s strange but the menu-hyperlinks don’t work – like on post 702 – they are not been executed when I click on them – only right-click open in new tab is working.

When I comment out jquery.lavalamp.min.js – the linkage is working again! But than the lamp-menu-effect does disappear! Please help. I’m working on a MAC G4, Tiger – it happens on Safari and Firefox
731. Alex on July 17th, 2009 at 10:57 pm

hey guys im trying to set it up so that on click, it will stay in that location in current state. how can i do this? i am doing a one page site where it scrolls down therefore there are no outgoing links to another page so adding class=”current” will not work.
732. John W on July 17th, 2009 at 11:26 pm

Hey there, have you heard of CODA SLIDER?? Is it possible to combine the Lava Lamp menu WITH the Sliding function of Coda Slider?

Or if you can’t specifically use Coda Slider is there a way to, “easily without jQuery knowledge”, make the Lava Lamp menu control the content in a slider style??

Coda Slider is here:
[ http://www.ndoherty.com/demos/coda-slider/1.1.1/#1 ]

** Also, I have substituted the Orange image and “lava.gif” with my own images. I have everything lined up and working properly EXCEPT for getting the “Lava.gif” to line up perfectly and evenly on each link… as In when the image slides under a new link the motion is fine, but when the image settles the edges are not symmetrical to the text…one side might go beyond the text farther than the other side…. Is this controlled somewhere in the CSS ?? or is it in the JS???

THANKS!!
733. Ganeshji Marwaha on July 18th, 2009 at 8:44 am

@Jens #730: Remove the “return false; ” statement that assign to the click handler and everything should start working as you would expect.

@John W #732: I am sure that can be achieved. In your source, you are using the panels (panel 1, panel 2 tabs) as anchors. Instead if you design them as lavalamp expects (as ul and li), then there is no reason why they should not work. But, if you want the lavalamp to slider when you click the next and prev for coda slider, i doubt it can done without seriously modifying lavalamp code.
734. John W on July 18th, 2009 at 7:20 pm

Ganeshji – THANKS! First off, The code rocks!! Thanks!! Didn’t really give you credit in the last post!

I am REALLY new to JS so i might be able to get it to work… I just am not sure with JS what “stuff” might be in the JS that would conflict with another JS function. I get lost knowing when the JS “names” something on its’ own, and what’s ‘generated’ using the CSS….

Thanks for the advice!! I will let you know if I am successful!!

Keep the Great Codes Coming! You Rock!
735. John W on July 18th, 2009 at 7:28 pm

Ganeshji – Do you know how to get the Lava Blob to line up evenly behind each link? Since I changed out the images there was some spacing issues which I mostly fixed… Here is the Demo I have so far… The Lava Blob functions perfectly but won’t “Stop” behind each link Symmetrically….

http://www.jfivedesigns.com/LVpp/LavaLampMenu/demo.html

Thanks again!
736. HamzaED on July 19th, 2009 at 3:47 pm

[...] LavaLamp : an outstanding use of jQuery to make an interactive menu . [...]
737. Adding a Lavalamp menu to Greysheets @ 3DN on July 20th, 2009 at 7:42 am

[...] old version already as the latest version is version 1.3.2. My version is still the one written by Ganeshji Marwaha, the 1.3.2 version is simply a version that has been adapted to jQuery 1.3. When I set up lavalamp [...]
738. 240 de pluginuri jquery | javascript&jquery on July 20th, 2009 at 10:17 am

[...] 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 [...]
739. Daniel Svensson on July 20th, 2009 at 9:32 pm

Hi,

Love this plugin! Trying to customize it in CSS with my own images
to fit my website.

(1)

In HTML markup the target src is “#” for a link. Will it work with masterpages in .NET ASP?

(2)

Going crazy with the css to actually get my lava-image to fit perfectly under the links. I’ve seen that your lava-image in the demo is quite strange, does the lava-image has to be in some format to work with the css?

Perhaps stupid questions but been tweaking for 2 hrs now and still not perfected.

My bg.png image is 450×40px
My lava.png image is 200×20

It has the same appearance as the demo.

Thanks!
740. Daniel Svensson on July 20th, 2009 at 10:07 pm

Hi again!

Now i have it working except for one thing!

My lava-image is not showing the rounded rigth-side, it’s flat vertically. The left side is ok.

Is my image to large or small ?

Thanks!
741. 240 plugin h?u ích c?a JQuery - C?ng ??ng l?p trình viên VI?T on July 21st, 2009 at 1:16 am

[...] Lava Lamp jQuery Menu. [...]
742. schneid3r » Como hacer un menu con Lavalamp on July 22nd, 2009 at 9:13 am

[...] http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ Categories: General Tags: Entradas más comentadasBuscadores de canciones segun la letraAjedrez con Stop MotionJaponecita Y Su Lenguita Comentarios (0) Referencias (0) Dejar un comentario Referencia [...]
743. schneid3r » Ufff on July 22nd, 2009 at 9:14 am

[...] blog personal donde colocare todo lo que encuentre en la net, proyectos y más. Todo esto gracias a Lavalamp menú y iNove. Categories: Noticias Tags: casi termino Entradas más comentadasBuscadores de [...]
744. Dink on July 23rd, 2009 at 10:48 pm

How would I go about modifying this to transition on mouse-click instead of as I move the mouse around?

What I’d like to be able to do is have the background stay stationary on the currently selected tab, then when I click another tab have the background transition over to it in the same fashion as it does now when I move the mouse back and forth.

Can this be done?
745. links for 2009-07-23 | Digital Rehab on July 24th, 2009 at 12:39 am

[...] LavaLamp for jQuery lovers! | Ganesh (tags: jquery menu javascript navigation lavalamp webdesign plugin djgonzo) [...]
746. ???????wordpress theme : pyrmont-v2 | Dogen's Photo Snap on July 24th, 2009 at 4:45 am

[...] inove ????? lavalamp [...]
747. Paintbits » Blog Archive » Lumen Reborn is here… on July 27th, 2009 at 12:18 am

[...] navigation element for a streamline browsing experience. The main navigation menu features a nice lavalamp effect. Other interesting aspects of the theme can be seen for example on the automatic generation [...]
748. Rohan on July 27th, 2009 at 2:18 am

Hello,
I really like this lavalamp nav. Thanks. There is one problem I cant seem to resolve. I am using this lavalamp for a navigation however when I click from page to page. The current link always goes back to First item in nav. I want it to stay on the link of that page. Hope this makes sense.
Thanks for any help.
749. javascript library @inforz - ????hover????????? on July 27th, 2009 at 5:27 am

[...] LavaLamp for jQuery lovers! [...]
750. Umirza on July 27th, 2009 at 7:33 am

Im using your version of the easing and lavalamp script with 1.3.2 version of jquery. I follow your example fully and even with you files for some reason I cannot get the picture to show in IE/FF.

In the mean while I am using your files and the no-image underline lavalamp with the 1.3.2 and I cannot get the lava to stay on a link that I click. click: function(event, menuItem) { return true;} ive tried w/ true and false and it still doesnt work. any help would be appreciated

« 1 … 10 11 12 13 14 15 16 17 18 19 20 … 29 » Show All

Ganesh

- Blog