Spotlight Menu

HTML

<ul id="menu">
    <li data-color="red"><a href="#">Lorem</a></li>
    <li data-color="green"><a href="#">Ipsum</a></li>
    <li data-color="orange" class="current"><a href="#">Dolor</a></li>
    <li data-color="yellow"><a href="#">Sit</a></li>
    <li data-color="purple"><a href="#">Amet</a></li>
</ul>

CSS

.sm_marker {
    width: 10px;
    height: 10px;
    /*background: url('http://i48.tinypic.com/2isi920.png') no-repeat top center;
    */
    background: #7DB700;
    width: 15px;
    height: 5px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    display: none;
    border-radius: 30px;
}


#menu {
    float: left;
    position: relative;
    list-style: none;
    margin: 20px;
    padding: 0px;
}

#menu li {
    width: 100%;
    /* 
    clear: both;
    float: left;
    */
    position: relative;
    z-index: 10;
}

#menu a {
    display: block;
    /* float: left; */
    padding: 10px;
    color: #555;
    font-size: 12px;
    font-family: 'Helvetica Neue', Sans-serif;
    text-decoration: none;
}

#menu .current {
    /* background: #111; */
}

#menu a:hover,
#menu .current a {
    color: #111;
}

JavaScript

$(function(){
    
    $('#menu').spotlightMenu({
    
        fill: [ true, true ]
    
    });
    
});


(function($) {

    $.fn.extend({ spotlightMenu: function( options ) {
      
      var defaults = {
          speed: 200,
          loadAnimation: false,
          fill: [ true, false ]
      };
        
      return this.each(function() {

        x = {},
        x.obj = $(this),
        x.o = $.extend( true, {}, defaults, options ),

        x.item = $('li', x.obj),
        x.objW = x.obj.width(),
        x.objH = x.obj.height(),
        // If menu width is bigger than the height,
        // we can assume its horizontal, otherwise not.
        x.horizontal = x.objW > x.objH ? true : false;

        init( x );

      });  
        
    }});
    
    
    function init( x ) {
 
        x.obj
        .prepend('<li class="sm_marker" style="position: absolute; margin: 0; padding: 0;"></li>');

        x.marker = $('.sm_marker', x.obj);

        // Static full width / height
        if ( !x.horizontal && x.o.fill[0] ) {
            x.marker.width( x.objW );
        }
        else if ( x.horizontal && x.o.fill[1] ) {
            x.marker.height( x.objH );
        }

        x.current = $('.current', x.obj);
        colorize( x );
        
        events( x );

        animate( x );

    }
    
    function events( x ) {
        
        x.item.on({
            
            mouseenter: function( e ) {
                
                x.eType = e.type,                
                x.eTarget = e.target,
                x.eCurrent = $(this);
                
                animate( x );
                
                colorize( x );
                
            },
            mouseleave: function( e ) {
                
                x.eType = e.type,                
                x.eTarget = e.target,
                x.eCurrent = $(this);
                
                animate( x );
                
                colorize( x );
                
      ...