Lavalamp effect ( Animated Menu ) using Jquery

Posted at February 3, 2010

We can see many jquery plugins for animated menu.  In this post I will go with the technique of how to create LavaLamp effect ( animated  menu ) using  Jquery .  Before going through the codes  you can check out  the demo link below to see  what precisely  lavalamp effect is.

DEMO
First lets go with the html codes for the menu.

<div id="menu">
  <ul>
      <li><a href="#" class='active'>Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Contact Us</a></li>
      <li id="sep" style="display:none;">&nbsp;</li>
  </ul>
</div>

Css Code for the above html code:

<style>
a {text-decoration:none; }
#menu
{
  background:url(../images/menu_bg.gif) repeat-x left top;height:31px;position:relative;
}
 
#menu ul{margin:0 15px;}
 
#menu ul li{float:left;display:inline;text-align:center;}
 
#menu ul li a{display:block;font-size:14px;color:#edeaea;line-height:31px;padding: 0 25px;position:relative;z-index:100;}
li#sep
{
  background: transparent url(../images/menu_hover.gif) repeat-x center top;position:absolute;height:31px;width:auto;z-index:50;
}
#menu ul li a.active
{
    background: transparent url(../images/menu_hover.gif) repeat-x center top;text-decoration: none;color: #FFF;
}
</style>

Please make sure you have set  right path for the background images in the css code.
In the above css code the class ‘active’ indicates the current link that is active. For Eg.  at the home page you will have the HOME link to be active.
I think rest of the  css codes are simple enough to understand. Now lets move to the jquery part actually where we  help render the Lavalamp effect on the above html menu code.

Jquery code:

<script>
$(document).ready(function ()
{
 
       var _menPos = $('div#menu').position();
       var _menLeft = _menPos.left;
 
       var _intPos = $('.topNav li a.active').position();
	   // width of the menu that is active
       var _intWidth = $('.topNav li a.active').width();
 
       // this is required because sometimes there cannot be any 'active' class
       if (_intPos !=  undefined)
       {
         var _intLeft =  _intPos.left+ $('.topNav li a.active').width();
         $('.topNav li#sep').css({
		              // left position of moving background or 'li'
					  'left':(_intPos.left)+'px',
					  // width of moving background or 'li'
					  'width':$('.topNav li a.active').parent().width()+'px'
      				   });
        }
 });
 
// on hover event
$('.topNav li a').hover(function()
{
     // position of the menu that is currently hovered.
	 var _pos=$(this).position();
     // animate the moving li to currently hovered menu.
	 $('.topNav li#sep').stop().animate({
          left:_pos.left+"px",
          width:$(this).parent().width()+"px"
          },400);
	  // omit the background  of the active menu
      $('.topNav li a.active').css({'background':'none'});
},
// on mouse out event
function()
{
 
   var _intPos = $('.topNav li a.active').position();
   // it there is no any active class then return
   if  (_intPos == undefined)
   {
		 $('.topNav li#sep').fadeOut('slow');
		 return;
   }
 
  var _intLeft =  _intPos.left;
 
  var _intWidth = $('.topNav li a.active').parent().width();
  // animate the moving li to the active menu
  $('.topNav li#sep').stop().animate({left:_intLeft+"px",
                        width:_intWidth+"px"},
	// 'easeOutBounce' will put the bouncing effect to the moving li
      {queue:false, duration: 700, easing: 'easeOutBounce'});
 
});
</script>

Here is the logic and technique  behind how this effect is rendered:

  1. In the  html code we can see the extra ‘li’ with id=’sep’. This ‘li’ carries the crucial role to obtain this effect. This is the main ‘li’ which moves over the other menu where hovered or mouse in event is exectued. In order to move it around other menus we have to define its position as ‘absolute’ in css code. Initially it is defined as the ‘display:none’ because it will take some width due to padding in the css code and resides at right end with some width in it and will be visible which we don’t want it to happen.
  2. Now at the document ready state we have to position the moving   ‘li’ ( ‘li’ with id ‘sep’ )  just to the same position of class active because we want the moving ‘li’ to start  from the active class to where it is hovered. If there is not any active class then it will remain in its own position i.e right end. Therefore , we have calculated the position of the active class and width in the document. ready state on the javascript.
  3. On  mouse over event we have to move the moving ‘li’ to the menu where it has been hovered. So our task will be to determine the position  and width of the hovered menu and animate the moving the ‘li’ to the respective hovered menu.
  4. On mouse out we have to determine  the position and width  of the active class and animate the moving ‘li’ accordingly to the active class. If there is no any active class on mouse out it will remain where it has been hovered i.e there won’t be any effect on mouse out event.

In the above jquery code I have used the ‘easeOutBounce’ effect. To acquire this effect only putting the ‘easeOutBounce’ in the animate function is not enough .  For this you have to include the jquery easing  plug-in  after jquery .

I hope you find this tutorial helpful to create your own lava lamp menu effect on your projects.  If there is any problem with the deployment of this code please you can contact me with ease.

1,583 views
Javascript, Jquery

Comments

10 Responses to “Lavalamp effect ( Animated Menu ) using Jquery”

Leave Comment

(required)

(required)