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

最新推荐文章于 2022-07-09 16:52:12 发布

weixin_30642029

最新推荐文章于 2022-07-09 16:52:12 发布

阅读量2.2k

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/neymargoal/p/9483321.html

版权

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

<!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>

转载于:https://www.cnblogs.com/neymargoal/p/9483321.html

weixin_30642029

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS】实现侧边栏下拉菜单

需求：实现侧边栏下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单实例</title> <style> ul { padd...
复制链接

扫一扫