jQuery: smart Lavalamp menu plugin

Yesterday a friend of mine was in trouble because he desperately needed to create a jQuery Lavalamp menu for a client featuring some peculiar characteristics, such as the ability to start from the current page item and an intelligent movement sensor which allows the cursor to stay on the last selected item. I created for him a simple jQuery plugin that performs all these tasks. Let's see the details.

The markup

We'll use the following markup:

<div id="navigation">
 <div id="lava">
  <div id="lava-cursor"></div>
 </div>
 <ul>
  <li><a href="">Home</a></li>
  <li class="current"><a href="">Archives</a></li>
  <li><a href="">Contact</a></li>
 </ul>
</div>

The CSS class named current allows our plugin to start from the current page item.

The CSS code

Our CSS code is pretty simple:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
 margin: 0 auto;
 padding: 2em 0;
 width: 50%;
 max-width: 600px;
}

#navigation {
 height: 3em;
 background: #f0f0f0;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 position: relative;
}

#navigation ul {
 margin: 0.4em 0 0 0;
 padding: 0;
 list-style: none;
 height: 2.6em;
 font: 90% 'Open Sans', sans-serif;
}

#navigation li {
 float: left;
 width: 6em;
 height: 100%;
 display: block;
 margin-right: 1em;
}

#navigation a {
 float: left;
 width: 100%;
 height: 100%;
 color: #333;
 text-transform: uppercase;
 text-align: center;
 line-height: 2.6;
 text-decoration: none;
 display: block;
}

#navigation a:hover {
 color: #d34545;
}

#lava {
 width: 100%;
 height: 0.2em;
 background: #ccc;
 position: relative;
}

#lava-cursor {
 width: 5.4em;
 height: 100%;
 background: #d34545;
 display: none;
 position: relative;
}

Our cursor is relatively positioned within its container on the top edge of our menu. By default this cursor is hidden.

The jQuery code

We need first to position the cursor on the current item and make it appear. Then we can make it slide to left or right by using the left offset of each menu item:

(function($) {


 $.fn.lava = function(options) {
 
  var that = this;
  
  var settings = {
  
   container: 'ul',
   cursor: '#lava-cursor',
   current: '.current',
   speed: 800
  
  
  };
  
  options = $.extend(settings, options);
  
  return that.each(function() {
  
   $(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
   
   $('li', $(options.container)).each(function() {
   
    var $li = $(this);
    
    $li.mouseover(function() {
    
     $(options.cursor).animate({
      left: $li.position().left
     }, options.speed);
    
    
    });
   
   
   });
  
  
  });
 
 
 };


})(jQuery);

Here's how you can use it:

$(function() {

 $('#navigation').lava();

});

You can see the demo below.

Demo

Live demo (on jsFiddle)