博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

2级菜单

Posted on 2017-01-21 14:40  程序员入门到放弃  阅读(243)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    *{margin:0;padding:0;border:0;font-family: "微软雅黑";}
    ul,ol{list-style:none;}
    a{text-decoration:none;color:#333;}
    em,i{font-style:normal;}
    body{background: #f2f2f2;}

    .clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
    .fl{float:left;display:inline-block;}
    .fr{float:right;display:inline-block;}
    .div{width: 330px;margin: 100px auto;background: #ffffff;padding-top:10px; padding-bottom: 10px;border:1px #dfdfdf solid;}
    .div h3{width: 277px;height:43px;background: #f6f6f4;margin: 0 auto;border:1px #ebebeb solid;border-radius: 9px;font-size: 14px;color:#b1926f;line-height: 45px;padding-left: 34px;background:url(images/zakladka.png) center 0 no-repeat; }

    .div span{display: block;width:26px;height:37px;float:right;background: url(images/on1.png) center 0 no-repeat;cursor: pointer;}

    .div ul{width: 270px;margin-left:40px; display: none;}
    .div ul li{width: 260px;height: 26px;font-size: 12px;color: #bca94c;line-height:26px; cursor:pointer;}

    .div .spbg{background: url(images/on2.png) center 0 no-repeat;}

    .div .on{display: block;animation:on 0.6s ease;animation-fill-mode: forwards;}
    @keyframes on{
        0%{height: 0px;opacity: 0.2;}
        25%{opacity: opacity:0.5;}
        50%{opacity: 0.7}
        100%{height: 140px; opacity: 1;}
    }

    .div .off{display: block;animation:off 0.6s ease;animation-fill-mode: forwards;}
    @keyframes off{
        0%{height: 140px;}
        30%{opacity: 0.3;}
        100%{height: 0px; opacity: 0; visibility:hidden;}
    }

    </style>
</head>
<body>

<div class="div"">
    <h3><span class="spbg"></span>Item 1</h3>
    <ul class="on">
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
    </ul>
    <h3><span></span>Item 2</h3>
    <ul>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
    </ul>
    <h3 ><span></span>Item 3</h3>
    <ul>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
        <li>Item without sunitms</li>
    </ul>
    <h3 >Item without sunitms</h3>
    <h3 >Item without sunitms</h3>
</div>
<script>
var div = document.getElementsByClassName("div")[0];
var uls = div.getElementsByTagName("ul");
var lis = div.getElementsByTagName("li");
var span = div.getElementsByTagName("span");
var len = lis.length; 
var liH = 26;
var finish = false;

for(i = 0; i < span.length; i++){

    span[i].index = i;

    span[i].onclick = function(){
        if(!finish){
            this.className = "spbg";
            uls[this.index].className = "on";
            finish = true;
        }else{
            this.className = "";
            uls[this.index].className = "off";
                    
            finish = false;
        }
        
    }
}


</script>

</body>
</html>