Jquery实现特效滑动菜单栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery实现导航滑动</title>
    <style type="text/css">
        .navlist
        {
            position: absolute;
            top: 10px;
        }
        a
        {
            text-decoration: none;
            color: White;
        }
        .navlist a
        {
            margin-left: 60px;
            color: #666;
        }
        .expand
        {
            height: 0px;
            background-color: #333d4d;
            overflow: hidden;
            position: relative;
            top: 30px;
            width: 100%;
        }
        .expdiv
        {
            height: 130px;
            width: 500%;
        }
        .expdiv-list
        {
            width: 20%;
            text-align: center;
            float: left;
            line-height: 110px;
            color: White;
        }
        .expand .close-btn
        {
            width: 120px;
            height: 20px;
            background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px;
            position: absolute;
            left: 50%;
            bottom: -2px;
            margin-left: -60px;
            cursor: pointer;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#menuList").on("click", "a", function () {
                // 模拟点击closeBtn按钮
                if($(this).hasClass("btn-active")){
                    $("#expandZone #closeBtn").click();
                    return false;
                }

                var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";
                if ($("#expandZone").hasClass("active")) {
                    //    给expdiv类元素赋予动画切换的效果
                    $("#expandZone .expdiv").animate({ marginLeft: mlValue });

                }
                else {
                    $("#expandZone .expdiv").css({ marginLeft: mlValue });
                    $("#expandZone").animate({ height: "130px" }).addClass("active");
                }
                //    为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式

                $(this).addClass("btn-active").siblings().removeClass("btn-active");

                return false;
            });

            $("#expandZone #closeBtn").on("click", function () {
                $("#expandZone").animate({ height: "0px" }, function () {
                    $(this).removeClass("active");
                    $("#menuList .btn-active").removeClass("btn-active");
                });
                return false;
            });
        });
    </script>
</head>
<body>
<div id="menuList" class="navlist">
    <a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a>
    <a href="#">关于我们</a>
</div>
<div id="expandZone" class="expand">
    <div class="expdiv">
        <div class="expdiv-list">
            <a href="#">主页</a>
        </div>
        <div class="expdiv-list">
            <a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a>
        </div>
        <div class="expdiv-list">
            <a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a>
        </div>
        <div class="expdiv-list">
            个人信息：
        </div>
        <div class="expdiv-list">
            公司地址：山东省淄博市
        </div>
    </div>
    <div id="closeBtn" class="close-btn">
    </div>
</div>
</body>
</html>