jQuery弹性滑动导航菜单

弹性滑动导航菜单现在已经不新鲜了，很多地方都能看到这种效果。这种菜单最大的亮点在于用户体验，它能清楚明确的指出你目前移动到了哪项菜单上，减少误点击。本人对这种效果比较有印象的是淘宝 UED 的一款 WordPress 主题，不过那是几年前的事情了，早就换掉了。

查 看 下 载

制作方法

引入文件

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

HTML

<div id="nav">

    <div class="nav-menu">

        <a href="#" class="current">首页</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)

        })

    })();

});

查 看 下 载

下载地址

·进入下载地址列表