sliding menu on hover

by pradeep

HTML

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link number 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link something 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>

CSS

ul {
    position:relative;
    margin: 50px;
}

ul li {
    display: inline-block;
}

ul li a {
    padding: 5px 15px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

#slider {
    position:absolute;
    top: -5px;
    left: 0;
    height: 100%;
    width: 0;
    padding: 5px 15px;
    margin-left: 1px;
    background-color: #f00;
    z-index:-1;
}

JavaScript

// insert slider
$('ul').append('<div id="slider"></div>');

// initially reset
var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left, 'width' : width});

// sliding
$('ul li a').hover(function(){
   
    var left = $(this).parent().position().left;
    var width = $(this).width();
    
    $('#slider').stop().animate({
        'left' : left,
        'width' : width
    });
});