<!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>
标签：hover,bootstrap,item,only,nav,导航条,sidebar,模板,icon From： https://www.cnblogs.com/caroline2016/p/16905453.html