带动态下划线指示的菜单

by ijse

HTML

<div id="myMenu">
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ul>
    <span></span>
</div>

CSS

#myMenu { position:relative; }
#myMenu ul li { width:50px; height:30px; display:block; 
    float:left; list-style:none; text-align:center; cursor:pointer; }
#myMenu span { width:50px; display:block; position:absolute;
    top:25px; left:0px; border:2px solid #f00; }

JavaScript

$("#myMenu ul li").hover( function() {
    var uline = $("#myMenu span");
    var uline_left = 0;
    //calculate left position
    for(i=0; i<$(this).index(); i++) {
        uline_left += $("#myMenu ul li").eq(i).width();   
    }
    // animate move
    uline.stop().animate(
        {"left":uline_left}, 200
    );
});