JQ滑動導航菜單的實現

前言：不多說直接看效果！！！

這樣的菜單我們在一般的網站上見到的也比較多，有比較好的用戶體驗！

 

原理：這個很重要，任何的特效只要原理搞明白了，實現起來都是很容易的！這個特效的原理很簡單,菜單的樣式我們都很容易實現就是一些CSS而已！

中間那個滑塊其實就是一個定位為： absolute 的元素，每當鼠標放到一個A元素上的時候用JQ獲取到當前A元素的位置和寬度，再用JQ的animate方法，以動畫的形式給元素即可！

當然你在這里也可以也一些其它的動畫

---

1、DOM結構

<div class="nav-wrapper">
        <div class="container">
            <ul id="nav-list">
                <li class="nav-item"><a href="http://www.lanrentuku.com/" class="active" target="_blank">網站首頁</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">網上商城</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">智能管家</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">技術支持</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">應用案例</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">關於我們</a></li>
                <li class="nav-item"><a href="http://www.lanrentuku.com/" target="_blank">懶人圖庫</a></li>
            </ul>
            <div class="animate-block"></div>
        </div>
    </div>

　　

2、對應的CSS

*{margin: 0;padding: 0;}
        body{ font-family:"Microsoft YaHei";}
        .container {
            width: 1200px;
            margin: 30px auto;
            position: relative;
        }
        li {
            list-style: none;
        }
        .nav-wrapper {
            background-color: #0191d7;
            height: 50px;
        }
        #nav-list {
            position: relative;
            z-index: 1;
        }
        #nav-list .nav-item {
            float:left;
            height: 50px;
        }
        #nav-list li a{
            display: block;
            padding: 0 50px;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        }
        .animate-block {
            position: absolute;
            height: 50px;
            background-color: #2B6B8A;
            left: 0;
            top:0;
            z-index: 0;
        }
        .active {
            box-shadow: 0 0 2px rgba(0,0,0,.1);
        }

 

3、JQ代碼

$(function () {
        var $active = $(".active"); //當前選中的菜單
        var $active_w = $active.innerWidth();
        var $active_l = $active.position().left;
        var $animate_block = $(".animate-block");
 
        //設置滑塊初始位置
        $(".animate-block").css({width:$active_w,left:$active_l});
 
        //a事件
        $("#nav-list>li").hover(function () {
            var index = $(this).index();
            var $a_cur = $("#nav-list a").eq(index);//得到當前元素
            var width = $a_cur.innerWidth();
            var left = $a_cur.position().left;
            $(".animate-block").stop().animate({width:width,left:left});
        },function () {
            $(".animate-block").stop().animate({width:$active_w,left:$active_l});
        });
    });

 

參考資料：

腳本之家： http://www.jb51.net/article/36302.htm

站長之家： http://sc.chinaz.com/jiaoben/141223079100.htm