zoukankan      html  css  js  c++  java
  • 【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>
  • 相关阅读:
    Spring MVC3 + Ehcache 缓存实现
    DB2导入导出数据库数据
    JS、ActiveXObject、Scripting.FileSystemObject
    new ActiveXObject("Scripting.FileSystemObject") 时抛出异常 .
    各种浏览器的内核是什么
    Content-Type: application/vnd.ms-excel">
    常用jar包用途
    nutz的json视图
    Nutz中那些好用的工具类
    The JSP specification requires that an attribute name is preceded by whitespace
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9483321.html
Copyright © 2011-2022 走看看