Animated Navigation

by tcloninger

HTML

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Buy</a></li>
    <li><a href="#">Ideas</a></li>
</ul>

CSS

#navigation{ position:relative; }
#navigation li{ display:inline; }
#navigation a{ padding:0 5px; }

#navigation_blob{
    position:absolute;
    z-index:-1;
    top:0;
    background-color:#ddf;
    -webkit-border-radius:5px;
}

JavaScript

$('<div id="navigation_blob"></div>').css({
    width: $('#navigation li:first a').width(),
    height: $('#navigation li:first a').height() + 4,
    left: -100
}).appendTo('#navigation');


$('#navigation a').hover( function(){
    
    //mouse over
    $('#navigation_blob').animate({
        width: $(this).width() + 10,
        left: $(this).position().left
    },{
        duration: 'slow',
        easing: 'easeOutElastic',
        queue: false
    });
    
}, function(){
    
    //mouse out
    $('#navigation_blob')
        .stop()
        .animate(
            {},
            {
                duration: 'slow',
                easing: 'easeOutCirc',
                queue: false
            })
        .animate({
            left: -100,
            width: $('#navigation li:first a').width() + 10
        }, 'fast');
    
});