<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /> <style> .brand-logo { width: 230px; } .brand-logo img { height: 15px; } .bi { width: 2rem; line-height: 0; color: white; } .nav .nav-link.active { border-radius: 0; } aside { background-color: #343a40; } .sidebar { min-height: 100vh; min-width: 230px !important; position: relative; } .sidebar-icon-only aside .brand-logo { width: 70px !important; } .sidebar-icon-only aside .brand-logo img, .sidebar-icon-only aside .brand-logo span, .sidebar-icon-only .item-prjname, .sidebar-icon-only #usernameDropdown span { display: none; } .sidebar-icon-only .sidebar { min-width: 70px !important; z-index: 10; } .sidebar .nav .nav-item .nav-link.active, .sidebar .nav .nav-item .sub-items .nav-item.active { background-color: #c2c7d0; color: #343a40; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link { position: relative; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .menu-title { display: block; padding: 1rem; position: absolute; left: 50px; top: -0.5rem; width: 180px; } .sidebar-icon-only .sidebar .nav .nav-item .collapse { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing { display: block; position: absolute; left: 66px; width: 180px; border-radius: 0 0 5px 0; padding: 0.2rem 0.5rem; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse .menu-title, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing .menu-title { display: inline-block; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse i.bi, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing i.bi { display: none; } .sidebar-icon-only .sidebar .menu-title, .sidebar-icon-only .sidebar .bi-chevron-right { display: none; } </style> </head> <body class="text-white"> <div class="d-flex flex-row"> <aside class="sidebar shadow-lg d-flex flex-column"> <div class="brand-logo px-2 pt-2 pb-0 d-flex justify-content-between align-items-center"> <span style="font-size: 1.5rem"><i class="bi bi-activity me-2"></i>text1</span> <button class="btn" data-toggle="minimize"><i class="bi bi-list"></i></button> </div> <hr /> <ul class="nav flex-column mb-auto"> <li class="nav-item"> <a href="#" class="nav-link link-light d-block active"> <span><i class="bi bi-bell-fill menu-icon"></i><span class="menu-title ms-2">Home</span></span> </a> </li> <li class="nav-item"> <a herf="#" class="nav-link link-light collapsed d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#home-collapse1" aria-expanded="false"> <span><i class="bi bi-house-door-fill menu-icon"></i><span class="menu-title ms-2">menu2</span></span> <i class="bi bi-chevron-right menu-arrow ms-auto"></i> </a> <div class="sub-items collapse" id="home-collapse1"> <ul class="nav flex-column"> <li class="nav-item ps-2 active"> <a href="#" class="nav-link link-light"><i class="bi bi-1-square"></i><span class="menu-title ms-2">menu3</span></a> </li> <li class="nav-item ps-2"> <a href="#" class="nav-link link-light rounded"><i class="bi bi-2-square"></i><span class="menu-title ms-2">menu4</span></a> </li> <li class="nav-item ps-2"> <a href="#" class="nav-link link-light rounded"><i class="bi bi-3-square"></i><span class="menu-title ms-2">text</span></a> </li> </ul> </div> </li> </ul> <hr /> <div class="dropdown mb-2 text-center"> <a class="link-light btn btn-sm dropdown-toggle" type="button" id="usernameDropdown" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-person-circle"></i><span class="ms-2">admin</span> </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">logout</a></li> <li><a class="dropdown-item" href="#">text2</a></li> </ul> </div> </aside> <div class="container-fluid"></div> </div> </body> <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script> <script src="../public/plugins/jquery-1.9.1.js"></script> <script> $('[data-toggle="minimize"]').on("click", function () { $("body").toggleClass("sidebar-icon-only"); }); $(".nav-item").hover( function () { $(this).addClass("hover-open"); }, function () { $(this).removeClass("hover-open"); } ); </script> </html>
原文地址：http://www.cnblogs.com/caroline2016/p/16905453.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
