jQuery弹性滑动导航菜单

制作方法

引入文件

<script src="js/jquery.min.js"></script>

HTML

<div id="nav">
    <div class="nav-menu">
        <a href="#">首页</a>
        <a href="#">了解我们</a>
        <a href="#">产品展示</a>
        <a href="#">服务报价</a>
        <a href="#">最新消息</a>
        <a href="#">联系方式</a>
    </div>

    <div class="nav-current"></div>
</div>

CSS

#nav {
    position: relative;
    margin: 100px auto 0 auto;
    width: 832px;
    border-bottom: 2px #ddd solid;
    _width: 835px;
}
#nav .nav-menu {
    height: 50px;
}
#nav .nav-menu a {
    float: left;
    display: block;
    padding: 0 40px;
    height: 50px;
    color: #666;
    text-decoration: none;
    font-size: 16px;
    line-height: 50px;
}
#nav .nav-current {
    position: absolute;
    bottom: -2px;
    overflow: hidden;
    height: 2px;
    background: #80b600;
}

JavaScript

$(function(){
    (function(){
        var $navcur = $(".nav-current");
        var $nav = $("#nav");
        var current = ".current";
        var itemW = $nav.find(current).innerWidth(); //默认当前位置宽度
        var defLeftW = $nav.find(current).position().left; //默认当前位置Left值

        //添加默认下划线
        $navcur.css({width:itemW,left:defLeftW});

        //hover事件
        $nav.find("a").hover(function(){
            var index = $(this).index(); //获取滑过元素索引值
            var leftW = $(this).position().left; //获取滑过元素Left值
            var currentW = $nav.find("a").eq(index).innerWidth(); //获取滑过元素Width值
            $navcur.stop().animate({
            left: leftW,
            width: currentW
        },300);
        },function(){
            $navcur.stop().animate({
            left: defLeftW,
            width: itemW
        },300);
        });
    })();
});