一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏

一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=‘viewport‘ content=‘width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no‘ />
    <title>YanGo</title>
    <script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        li{
            list-style-type: none;
        }
        .box{
            margin: auto;
        }
        .bar{
            position: relative;
            float: left;
            width: 33.33%;
            text-align: center;
        }
        .bar p{
            background-color: #08c;
            color: #fff;
            height: 40px;
            line-height: 40px;
        }
        .bar ul{
            display: none;
            margin-top: 10px;
            position: relative;
            top: 0;
            background: #29a7e6;
            color: #fff;
            width: 80%;
            position: relative;
            border-radius: 10px;
        }
        .bar ul:before{
            position: absolute;
            content: "";
            top: -8px;
            background: #29a7e6;
            width: 15px;
            height: 15px;
            left: 46%;
            transform:rotate(45deg);
            z-index: -1;
        }
        .bar ul li{
            height: 35px;
            line-height: 35px;
        }
        .box li:active{
            background: rgba(255,255,255,.3);
        }    
    </style>
</head>
<body>
    <div class="box">
        <ul class="ul1">
            <li class="bar">
                <p>早餐</p>
                <ul>
                    <li>糕点</li>
                    <li>稀粥</li>
                    <li>营养</li>
                </ul>
            </li>
            <li class="bar">
                <p>午餐</p>
                <ul>
                    <li>小炒</li>
                    <li>凉拌</li>
                    <li>甜点</li>
                </ul>
            </li>
            <li class="bar">
                <p>晚餐</p>
                <ul>
                    <li>汤类</li>
                    <li>肉类</li>
                    <li>清淡</li>
                </ul>
            </li>
            <div style="clear: both;"></div>
        </ul>
    </div>
</body>
<script>
    $(".bar").click(function(){
        if($(this).children("ul").css("display") == "block"){
            $(this).children("ul").slideUp(300);
        }
        else{
            $(this).children("ul").slideDown(300);
        }
    });
</script>
</html>

 

一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏

上一篇:Android Studio学习安卓笔记(一)安卓与Android Studio运行第一个项目


下一篇:盒子跟随鼠标坐标移动的问题