Simple Lava Lamp Menu Tutorial with jQuery

Simple Lava Lamp Menu Tutorial with jQuery


Simple Lava Lamp Menu Tutorial with jQuery

Introduction

Lava Lamp Menu is one of the favourite menu that has been using by some websites. It has a jQuery plugin for it, we're not reinventing the wheel, but it will be good to know how it works, how to customize it and make a unique one.

I've break it into different sections (html, css and javascript), in depth explanations with text, illustrations and two examples - a naked version and a styled version. Before we start you need jQuery easing for animated transition. and in that website, it has whole list of transition, and you can use any of them in this lava lamp menu tutorial! :)

  • make a rounded corner menu item for floating box.
  • A floating box following the menu item when you mouse over it
  • and the floating box should back to where it was when you mouse is out of the menu
  • elastic animated effect when the floating box moving around
  • floating box will stay in the menu item that you've clicked on it

Also, feel free to browse around my website, I have written huge amount of practical jQuery tutorials for frontend web design and development. :) Right, let's get it started.

1. HTML

In HTML section, I always want to keep it nice and clean, well, at least easy to understand. It's recommended to use UL list for menu. In this Lava menu tutorial, we will need some extra html elements after the list to make the floating bubble. Also, you need to set the default selected item, This is how the HTML looks like:

<div id="lava">

	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">lava lamp menu</a></li>
		<li><a href="#">queness.com</a></li>
		<li class="selected"><a href="#">jQuery</a></li>			
	</ul>

	<!-- If you want to make it even simpler, you can append these html using jQuery -->
	<div id="box"><div class="head"></div></div>

</div>

2. CSS

When you want to make some animation, position absolute and relative are the key thing. If we want to set the absolute position within a container, we need to make sure the parent item is set to position relative, otherwise, the children item will be positioned according to the window screen. Of course, z-index can only work if position absolute is defined. Now, please refer to the image below, it's basically the idea of lava lamp menu.

lava menu structure

For the floating #box, if you want to style it up with rounded corner, this is how to do it. You need to draw the box, make it long, and then slice it out, so you have two pieces of images, head and tail. Tail image is set as the background of #box and position it to right hand side of #box. And head image need to set it as the background for head class, and extra padding (width of the tail) to make sure the tail is not covered by the head image.

lava menu design structure

Lastly, *drumroll*, you just make a expandable rounded box. Why called it expandable? because the jQuery will resize the width of the head class so that it will fit to list item. You might want to further playing around with the CSS to tweak the #box. And you can adjust it in the following section of the CSS:

  • height, padding-right and margin-left in #box
  • height, and padding-left of the .head class
	body {
		font-family:georgia; 
		font-size:14px; 
	}
	a {
		text-decoration:none; 
		color:#333;
	}
	
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:center; 
		width:583px; 
		height:40px;
	}
	
	#lava ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:110px; 
		top:0; 
		
		/* should be higher than #box */
		z-index:100;

	}
	
	#lava ul li {
		
		/* give some spaces between the list items */
		margin:0 15px; 
		
		/* display the list item in single row */
		float:left;
	}
	
	#lava #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		
		/* should be lower than the list menu */
		z-index:50; 

		/* image of the right rounded corner */
		background:#ccc; 
		height:20px;
		
		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* self-adjust negative margin to make sure the box display in the center of the item */
		margin-left:-10px;
	}
	
	#lava #box .head {
		/* image of the left rounded corner */
		background:#eee;
		height:20px;

		/* self-adjust left padding to make sure the box display in the center of the item */
		padding-left:10px;
	}

3. Javascript

As long as we have the CSS ready, jQuery will move the floating box to the correct position and react to the mouse events. To make it even easier to understand, I break it into two sections

This is what jQuery will do once the page is loaded:

  1. Once the javascript load, it search for the default selected item,
  2. and then, it grabs its position and its width and set it to the floating box

This is what jQuery will do with the mouse hover and mouseout event:

  1. It grabs the mouse hovered item's position and width,
  2. and then, set it to the floating box with the animate method and the animation transition with certain duration (you can change the duration)
  3. If the mouse out of the menu, it grabs the default selected item's positon and width, and move the floating box back to the original position
  4. And, if user clicked on the item, it will be the default selected item
	
	$(document).ready(function () {

		//transitions
		//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
		var style = 'easeOutElastic';
		
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
		var default_width = $('#lava li.selected').width();

		//Set the floating bar position and width
		$('#box').css({left: default_left});
		$('#box .head').css({width: default_width});

		//if mouseover the menu item
		$('#lava li').hover(function () {
			
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava').offset().left);
			width = $(this).width(); 

			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
		
		//if user click on the menu
		}).click(function () {
			
			//reset the selected item
			$('#lava li').removeClass('selected');	
			
			//select the current item
			$(this).addClass('selected');
	
		});
		
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava').mouseleave(function () {

			//Retrieve the selected item position and width
			default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
			default_width = $('#lava li.selected').width();
			
			//Set the floating bar position, width and transition
			$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
			
		});
		
	});

Update

2009-08-15: Wrong calculation for left value. Fixed. Credit to Carolyn who found the bug! :)

Conclusion

That's the lava lamp menu :) We've just reinvented the lava lamp! A version that you understand fully how it works, and modify it at your will. I hope you will also learn some analytic skills from this, and sooner or later you will able to create your own menu with unique effect. Who knows, I might reinvent your inventions one day. :)

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

58 comments

john
Fri, 23rd September 2011
guys i need your help . i want to add a drop-dpwn menu ,
what should i do ..
cheers Reply
claudio
Sun, 25th December 2011
You can do this:
<ul>
<li>Item 1</li>
<li>Item2 with dropdown
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
</li>
</ul>
Reply
Kevin Liew Admin
Mon, 2nd January 2012
Sergio
Fri, 23rd March 2012
Greetings.
I new with jquery, and i am testing your lava menu in one of my html pages, everything works just fine, until i click in any given option. Looks like the click is not working because is not taking me to the intended html page i wanto go to. Any help will be greatly appreciated.
Thanks,
Sergio Reply
Kevin Liew Admin
Mon, 26th March 2012
because there aren't any links included. It's just a hash tag. Reply
Govinder
Wed, 30th May 2012
Hi Kevin,

Will this work with the horizontal sliding html page you designed.

This is the link.

http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery Reply
Bintang
Tue, 10th April 2012
very-very good-looking tab-menu!! A must-try-tutorial. Thanks for the script. Reply
Sayali
Tue, 17th April 2012
If we need a drop down (sub menu) for any of the tab, how do i do that? Reply
Gaetano Mastellone
Thu, 26th July 2012
Hi,
i've used lavalamp menu that i've downloaded from this site (http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/#), for the menu's links i made i've used same images and i've modified lavalamp effect trasforming it in a line under the image.
I need move the line plus under but i'm not able.
You can see the example to this link www.gaetanomastellone.net/pages/menu2.html

Best regards Reply
dhanny
Mon, 12th November 2012
Thanks for this tutorial. I've tried on my website www.dhafy.com. But I found trouble when there's no selected menu class. Right now I still looking solutions any solutions

Regards Reply
Fernando Romenski
Tue, 17th September 2013
Excellent!!! Thanks very much Reply
Pawel
Tue, 10th December 2013
'display: inline' shouldn't be in '#lava ul li'? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement