【HTML+CSS】实现侧边栏下拉菜单

需求：实现侧边栏下拉菜单

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单实例</title>
    <style>
        ul {
            padding:0;
            margin:0;
            list-style: none;
        }
        .nav {
            width: 120px;
        }
        .nav h2 {
            margin:0;
            font-size: 16px;
            font-weight: normal;
            padding: 0px 20px;
            height: 40px;
            line-height: 40px;
            border:1px solid #999;
            border-bottom:none;
            background: #369;
            cursor: pointer;
        }
        .nav ul {
            border:1px solid #999;
            height: 0px;
            border-width:0px;
            overflow: hidden;
            transition:all .5s;

        }
        .nav ul.active {
            height: 125px;
            border-width: 1px;
        }
        .nav li a{
            color:#333;
            font-size: 14px;
            text-align: center;
            text-decoration: none;
            display: block;
            padding: 0px 20px;
            height: 30px;
            line-height: 30px;
            border-bottom:1px solid #999;
        }
        .nav li:last-child a {
            border-bottom:none;
        }
    </style>
</head>
<body>
    <h1>后台管理</h1>
    <hr>

    <div class="nav">
        <h2>用户管理</h2>
        <ul>
            <li><a href="#">用户列表</a></li>
            <li><a href="#">用户添加</a></li>
            <li><a href="#">用户删除</a></li>
            <li><a href="#">用户修改</a></li>
        </ul>

        <h2>订单管理</h2>
        <ul>
            <li><a href="#">订单列表</a></li>
            <li><a href="#">订单添加</a></li>
            <li><a href="#">订单删除</a></li>
            <li><a href="#">订单修改</a></li>
        </ul>


        <h2>商品管理</h2>
        <ul>
            <li><a href="#">用户列表</a></li>
            <li><a href="#">用户添加</a></li>
            <li><a href="#">用户删除</a></li>
            <li><a href="#">用户修改</a></li>
        </ul>

        <h2>评论管理</h2>
        <ul>
            <li><a href="#">用户列表</a></li>
            <li><a href="#">用户添加</a></li>
            <li><a href="#">用户删除</a></li>
            <li><a href="#">用户修改</a></li>
        </ul>
    </div>

    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $('.nav h2').on('click', function(){
                $(this).next('ul').toggleClass('active')
            })
        })
    </script>
</body>
</html>

 

posted @ 2018-08-15 18:54  NeymarGoal  阅读(7449)  评论(0)  编辑  收藏  举报