jQuery实现动画滑动二级菜单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script src="滑动动画.js" type="text/javascript"></script>
    <link rel="stylesheet" href="滑动动画.css" type="text/css"/>
</head>
<body>
<div class="header">
    <ul>
        <li class="nav"><a href="#">one</a></li>
        <li class="nav"><a href="#">two</a></li>
        <li class="nav"><a href="#">three</a></li>
        <li class="nav"><a href="#">four</a></li>
    </ul>
</div>
<div class="big">
    <div class="main">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</div>
</body>
</html>
*{
    margin:0;
    padding:0;
}
.header{
    background-color:aqua;
    height: 40px;

}
ul{
    list-style: none;
}
ul li{
    float: left;
    text-align: center;
    line-height: 40px;
    border-right: 1px solid white;
}
a{
    text-decoration:none;
    color: white;
    display: block;
    padding: 0 20px;
}
ul li a:hover {
    background-color: white;
    color: aqua;
}
.big{
    width:100%;
    overflow: hidden;
    height:0;
    top:40px;
}
.main{
    width: 400%;
    height:500px;
}
.a{
    width:25%;
    height: 500px;
    background-color: yellow;
    float:left;
}
.b{
    width:25%;
    height: 500px;
    background-color: red ;
    float:left;
}
.c{
    width:25%;
    height: 500px;
    background-color: black ;
    float:left;
}
.d{
    width:25%;
    height: 500px;
    background-color: blue;
    float:left;
}

 

$(function () {
    $(".header").on("click","li",function () {
        var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";
        /*index()获取header里的li，并确定为第几个然后返回数字*/
        if ($(".big").hasClass("active")) {
            $(".main").animate({marginLeft: mlValue});
        }
        else{
            $(".main").css({marginLeft:mlValue});
            $(".big").animate({height:"500px"}).addClass("active");
        }
    });
});

 

posted @ 2017-08-16 12:08  Cooper_Yao  阅读(396)  评论(0)    收藏  举报