【小技巧】制作一个滑动过渡切换的导航条

实现效果图：

---

原理：

1. 使用2个相同的导航条，一个（nav1）放置在底部做为默认样式，一个（nav2）做为鼠标悬浮上去的样式。
2. 将nav1和nav2全部绝对定位于同一个父容器。
3. nav2的宽度只设置为一个菜单的大小，让溢出的部分隐藏，这样就透出底部的默认样式，达到没被训中的效果。
4. 通过js来控制滑块（bg）在nav2上滑动，滑动到的地方就显示出悬浮效果。
   

   ---

---

demo代码：

<div>
        <div class="box1">
            <div class="bg">
                <ul class="demoNav1" style="left:-10px">
                    <li class="on">全部案例</li>
                    <li>网站设计</li>
                    <li>APP开发</li>
                    <li>微信平台</li>
                    <li>软件开发</li>
                </ul>
            </div>
        </div>
        <div class="box">
            <ul class="demoNav">
                <li class="on">全部案例</li>
                <li>网站设计</li>
                <li>APP开发</li>
                <li>微信平台</li>
                <li>软件开发</li>
            </ul>
        </div>
    </div>

javascript脚本：

<script type="text/javascript">
        //导航栏活动效果
        $(document).ready(function () {
            var menuLi = $(".demoNav li");
            var bg = $(".bg");
            menuLi.hover(
            function () {
                for (var i = 0, len = menuLi.length; i < len; i++) {
                    if ($(this).index() == i) {
                        $(".demoNav1").css("left", -menuLi.outerWidth(true) * i-10);
                        bg.animate({ left: menuLi.outerWidth(true) * i }, { queue: false, duration: 100 });
                    }
                }
            }
            );
        });
    </script>

css样式：

/*案例页面导航条*/
.demoNav, .demoNav1 {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14pt;
}

.box, .box1 {
    height: 50px;
    position: absolute;
}

.box {
    width: 707px;
    z-index: 0;
}

.box1 {
    width: 0px;
    z-index: 1;
}

    .box ul, .box1 ul {
        width: 707px;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
    }

    .box li, .box1 li {
        width: 100px;
        height: 50px;
        float: left;
        line-height: 50px;
        cursor: pointer;
        text-align: center;
        border-radius: 5px;
    }

.box li {
    margin: 0 10px;
    background: #F5F5F5;
}

.box1 li {
    margin: 0 10px;
    background: #4D4D4D;
    color: white;
}

    .box li:last-child, .box1 li:last-child {
        border: none;
    }

.bg {
    width: 100px;
    height: 50px;
    position: absolute;
    z-index: 1;
    margin-left: 10px;
    overflow: hidden;
}

源码下载：http://pan.baidu.com/s/1kU7QaVl