Sample Lavalamp menu

Hi *.*,

A Lavalamp effect is simply made by an empty element with a declared background color that follows the mouse position when you move it through the items of a menu. In other words, it consists of a simple cursor that changes its left offset when you change your mouse position moving from an item to another.

DEMO

CSS

    <style type="text/css">

body {

       margin: 0;

       padding: 0;

       font: 100% Arial, sans-serif;

}

#navigation {

       height: 2em;

       padding: 0 1em;

       border-bottom: 1px solid #c34545;

       position: relative;

}

#navigation ul {

       margin: 0;

       padding: 0;

       list-style: none;

       height: 100%;

}

#navigation li {

       float: left;

       height: 100%;

       margin-right: 0.5em;

}

#navigation a {

       float: left;

       height: 100%;

       padding: 0 1em;

       color: #d34545;

       font-weight: bold;

       text-transform: uppercase;

       text-decoration: none;

       line-height: 2;

}

#navigation a:hover {

       color: #a34545;

}

#navigation #lava {

       background: #e5e5e5;

       height: 100%;

       overflow: hidden;

       position: absolute;

       top: 0;

       left: 0;

       width: 0px;

       z-index: -1;

}

</style>

 

 Adding Links

<div id="navigation">

       <ul>

      

              <li><a href="#">Home</a></li>

              <li><a href="#">About</a></li>

              <li><a href="#">Contacts</a></li>

      

       </ul>

</div>

Jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

  $('<div id="lava"/>').appendTo('#navigation');

 

  $('li', '#navigation').each(function() {

 

    var $li = $(this);

    var $a = $('a', $li);

    var left = $a.position().left;

    var width = $a.outerWidth();

   

    $a.mouseover(function() {

   

      $('#lava').css('width', width).

      stop(true, true).

      animate({

        left: left

      }, 'slow');

     

   

    });   

 

 

  });

});

</script>

Download sample from here

Stay Tune...

Have a nice day... 'N happy Coding :)