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

FireDart
Thu, 13th August 2009
Very nice! Got a question thought.
How would I go about centering the
on the page? Which is located in a Div with a 100% width background-image? Reply
FireDart
Thu, 13th August 2009
Never mine found a solution! Thanks for the script, it's really cool. Reply
jim
Fri, 14th August 2009
really nice job! Reply
Nykeri
Sat, 15th August 2009
really awesome didn't lava lamp was the name of that feature nice Reply
Eric
Mon, 24th August 2009
Nice! Before i dive to far into the comment outs in the code, i have a need for a lava lamp, but just a single size graphic and there will be a logo centered on that graphic...so could i get away from slicing up an image into an end cap and make one uniform sized graphic to represent my "lava" Reply
kevin Admin
Mon, 24th August 2009
hmm, i dont think u can do that :)... if you want single size image, it not longer called lava lamp. haha, however, you can achieve it by removing the line that resize .head class. remove the head class, and set the width and the background image in #box. that should work. Reply
Typemanuel
Wed, 26th August 2009
Thanks so much for these great tutorials. One suggestion: you should include whether or not these tutorials are compatible with IE5.6.7. Mozilla or Safari, PC, MAC etc...
But otherwhise, CONGRATS.

www.typemanuel.com Reply
Tom Hermans
Thu, 3rd September 2009
This is a great tutorial, but there goes something wrong with the selected state. When I click a link, on the next page always the same item is selected again.. How can this be fixed.. ? Reply
kevin Admin
Thu, 3rd September 2009
Hi Tom, there is nothing wrong with the selected state. You will need to set it using cookie, or using server side language to put the selected class to the page u're currently in. Reply
Hilary
Wed, 9th September 2009
This is awesome. But any idea why the floating bar wouldn't be reseting to the selected item when the mouse leaves my nav bar? My site is a custom wordpress theme. And I'm using images in my
for links instead of text.
Reply
kevin Admin
Thu, 10th September 2009
hi hilary, that's the concept of lava lamp menu, the lava return back to where it was. However, you can set the position of the lava thou, put in the selected class. It normally assign using server side language or cookie.

hmm, image instead of text. that could be the major problem, because the lava is displayed underneath the text, if it's images, it will completely hide it. Unless you set the transparency of the lava and make it appears on the top of those image, otherwise, it wouldn't work. Reply
kevin Admin
Tue, 22nd September 2009
Hi tom, yea, you definitely can do that. jQuery support can support multiple id in the selector:

$('.current_page_parent-class, .current_page_item-class')

not sure if it answered your question, but do let me know how it goes. cheers Reply
Tom Hermans
Tue, 22nd September 2009
I used the menu for a wordpress site and I use the .current_page_item-class to set the menu to the selected menu-item. However, if I'm on a subpage or I select a category Wordpress doesn't add a .current_page_item but a .current_page_parent-class. Is there a way to use more than one class that is the "selected" state ?

Cause now the menu behaves ok if on a regular page, but not when I'm reading a subpage ..

example (not finished site): www.geertpattyn.be/wordpress Reply
Ash
Sun, 27th September 2009
Hello there! I love how you explained the Lava Lamp feature to us. Thumbs up to you.

One question though: you said you can append the extra HTML of <div id=\"box\"><div class=\"head\"></div></div> using jQuery. How would you go about doing that? Reply
kevin Admin
Sun, 27th September 2009
@Ash, you have a very nice avatar :)

and, for the question, you can add this inside $(document).ready();

$(\"#lava\").append.(\'<div id=\"box\"><div class=\"head\"></div></div> \');

easy right? :) i hope it works, I haven\'t tested it yet. Reply
Sebastian
Wed, 2nd December 2009
find modified lava lamp menue at www.mandel-media.com Reply
ooty
Mon, 21st December 2009
nice tutorial Reply
Mr. herretøj
Fri, 8th January 2010
This is indeed cool, and I like the fact, that it doesn't destroy you internal linkbuilding ;-)
I will be cooperating this in to my site soon....
Thank you very much ;-) Reply
Mr. herretøj
Sat, 16th January 2010
Is there any way to manually change the item selected with javascript.

For instance if you have the list in the html-example, how would you do that?
Could you assign values to the list, and somehow choose wich one is selected?
I am a total newbie, so please really spell it out for me.... any help is much apreciated....


Reply
Dave Brookes
Sun, 17th January 2010
Nice little menu, is there any way to handle the case where there isn't an selected class state passed to the list item?

At the moment it gets a little confused when there isn't a list item to return to, this would be really useful for 'fluff' pages such as privacy policies that won't trigger an active state on a main navigation. Reply
Damien
Fri, 12th March 2010
Hello Kevin, I managed to install Lavalamp on my main menu. This works perfectly. I then installed Lavalamp on a second menu on the same page by adding the second selector alongside the first: ( "# ID1, ID2 #) and (selected1, selected2) and (# box1, # box2) (# box1. head1, # box2. head2). My problem is that i hover the <li>'s second menu, Lavalamp works but only on the first menu. The box is the size of the second menu li (perfect) but appears on the main menu (not perfect)).
Could you help me with that? thans so much for your advise. Damien Reply
Sprike Ltd
Tue, 8th June 2010
Brilliant post Reply
niveen
Wed, 30th June 2010
designer Reply
qing
Thu, 19th August 2010
very nice post!
it is just what i am looking for.
thank you for sharing :) Reply
EngineerCreativity
Sun, 29th August 2010
Brilliant tutorial Reply
Jessca Doley
Mon, 4th October 2010
great tutorial and useful code! Thank you for sharing :) Reply
Katy
Sun, 16th January 2011
what should i do to add more items in menu?? Reply
Kevin Liew Admin
Mon, 17th January 2011
You do this:

<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>
<li><a href="#">new item 1</a></li>
<li><a href="#">new item 2</a></li>
............
</ul>

also, you need to increase the width accordingly,

#lava {
.....
width:583px;
.....
} Reply
tareq
Wed, 21st September 2011
what about drop down menu . can i add a drop down sub menu ???????? Reply
tareq
Fri, 23rd September 2011
??????? come oooon kevin Reply
James Barrett
Mon, 14th February 2011
Great script. I have modified it a bit and what is happening is that the calculation for the left 5 out of 10 times causes the following
<div id="box" style="left: 40px; ">
<div class="head" style="width: 1279px; ">
</div>
</div>
if you want to see my development to see it in action please visit http://daspixl.com/dev Reply
Natalia
Wed, 6th April 2011
Funciona! muy buen articulo, muchas gracias por compartirlo.
Thanks! Reply
Daniel
Wed, 11th May 2011
Hi there. I've implemented this awesome menu, but i have problem: my #lava item needs to be 750px; when the user do a rollover in the last menu item, the #box runs quickly to this position and is out from the #container. When the #box returns from the last menu item to the first menu item occurs the same thing. If anyone wants to see the example, i can provide the url of my site. Reply
Eric
Wed, 15th June 2011
I'm having trouble getting this menu to work with the default wordpress styling (twentyten theme). In the javascript code, I've replaced #lava with .menu-header, and replaced li.selected with li.current-menu-item. I'm sure I'm missing something else. Your help would be much appreciated! Reply
manarius
Mon, 13th February 2012
should be
.current_menu_item

with underscores (guess it wont help the poster, but maybe others that look for this info here ;) Reply
VicTheme
Wed, 13th July 2011
Thanks for sharing..
I’ve also just created lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
Welcome for any review or comment:) Reply
tareq
Wed, 14th September 2011
hey all ,
i just wanna know how can the lava lamp stay on the selected item after refreshing the page ,
coz my href's have $_GET values , and clicking them will refresh the page and change the main content only ,
what should i do
anyone can help me please , as soon as you can
thanks
cheers Reply
Kevin Liew Admin
Wed, 14th September 2011
Hi, you can do it like this:

<li class="<?=($_GET['page'] == 'pagename') ? 'selected' : '' ?>">Menu Item</li>

you will need to substitute $_GET['page'] based on your variable. You will need to do it for all the list item. Reply
tareq
Thu, 15th September 2011
thanks for the post . i got the idea , but i didn't work for me , here is my code .what should i do ???

<li class="<?=($_GET['do'] == 'main')?'selected':'' ?>"><a href="demo.php?do=main">Home</a></li>
<li class="<?=($_GET['do'] == 'second')?'selected':'' ?>"><a href="demo.php?do=second">second</a></li>

thanks Reply
Kevin Liew Admin
Thu, 15th September 2011
Does it display any error? So, when you navigate to "main" page, does it displays "selected" in the LI? If not, try to echo $_GET['do'] out to see the data in it. Reply
tareq
Thu, 15th September 2011
yes , when i navigate to "main" page it takes the width for the home item , but the position is wrong
the position changes to an empty area , maybe i can send you a screen shot or somthing ,

thanks alot for your help ,
Reply
tareq
Thu, 15th September 2011
ooooops ,
am sorry , the code you send it to works 100%
thanks alot for your help
i dont know how to thank you , here is my email
tareq[dot]bajjaly[at]hotmail[dot]com
add me if you want , and if there anythingg i could do , feel free to contact me
:):)
cheers Reply
tareq
Thu, 15th September 2011
hey .
what should i do to control the (speed) of the box ??? Reply
Kevin Liew Admin
Mon, 13th February 2012
you can play with line 23, 24, 45, 46. Reply
tareq
Thu, 15th September 2011
guys , when i click on the last item in the nav menu , the box is moving away from the menu bar before it turns back , what should i do to minimize the width ..??? Reply
tareq
Tue, 20th September 2011
hey all ,
how can i add drop down submenu into this lava menu .. please anyone can help me with that ... Reply
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