CSS 实现伸缩导航仪表板侧边栏菜单
效果展示
-
展开状态
-
收起状态
CSS 知识点
- 回顾曲面圆角的实现知识点
字体库准备
菜单的图标使用的是ionicons
的图标库,所以需要页面需要引入对应的文件。
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
整体页面布局
菜单名称的隐藏,我们是通过控制菜单容器的宽度来实现的。
<div class="menuToggle"></div>
<div class="sidebar">
<ul>
<li class="logo" style="--bg:#333">
<a href="#">
<div class="icon">
<ion-icon name="logo-apple"></ion-icon>
</div>
<div class="text">Website Logo</div>
</a>
</li>
<div class="Menulist">
<li style="--bg:#f44336" class="active">
<a hred="#">
<div class="icon">
<ion-icon name="home-outline"></ion-icon>
</div>
<div class="text">Home</div>
</a>
</li>
<li style="--bg:#ffa117">
<a hred="#">
<div class="icon">
<ion-icon name="person-outline"></ion-icon>
</div>
<div class="text">Profile</div>
</a>
</li>
<!-- 此处省略了其他菜单项 -->
</div>
<div class="bottom">
<!-- 用户信息 -->
<li style="--bg:#333">
<a href="#">
<div class="icon">
<div class="imgBx">
<img src="./user.jpg" />
</div>
</div>
<div class="text">Muhammea Irshad</div>
</a>
</li>
<!-- 退出按钮 -->
<li style="--bg:#333">
<a href="#">
<div class="icon">
<ion-icon name="log-out-outline"></ion-icon>
</div>
<div class="text">LogOut</div>
</a>
</li>
</div>
</ul>
</div>
实现整体页面样式
:root {
--clr: #14161e;
}
body {
min-height: 100vh;
background: var(--clr);
}
.sidebar {
position: absolute;
width: 80px;
height: 100vh;
background: #fff;
transition: 0.5s;
padding-left: 10px;
overflow: hidden;
}
编写菜单展开时的样式
首先我们现在页面中添加菜单激活的类,具体代码如下:
<div class="sidebar active">
<!-- 省略内容代码 -->
</div>
然后编写菜单展开的样式
.sidebar.active {
width: 300px;
}
.sidebar ul {
position: relative;
height: 100vh;
}
.sidebar ul li {
position: relative;
list-style: none;
}
.sidebar ul li.active {
background: var(--clr);
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.sidebar ul li.active::before {
content: "";
position: absolute;
top: -20px;
right: 0;
width: 20px;
height: 20px;
border-bottom-right-radius: 20px;
/* 使用 box-shadow 属性上曲面 */
box-shadow: 5px 5px 0 5px var(--clr);
background: transparent;
}
.sidebar ul li.active::after {
content: "";
position: absolute;
bottom: -20px;
right: 0;
width: 20px;
height: 20px;
border-top-right-radius: 20px;
/* 使用 box-shadow 属性下曲面 */
box-shadow: 5px -5px 0 5px var(--clr);
background: transparent;
}
代码实现后效果如下:
编写菜单导航项的样式
我这里先把用户的头像图片隐藏了,便于查看效果。
.sidebar ul li.logo {
margin-bottom: 50px;
}
.sidebar ul li.logo .icon {
font-size: 2em;
counter-reset: var(--clr);
}
.sidebar ul li.logo .text {
font-size: 1.2em;
font-weight: 500;
color: var(--clr);
}
.sidebar ul li a {
position: relative;
display: flex;
white-space: nowrap;
text-decoration: none;
}
.sidebar ul li a .icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 60px;
height: 70px;
font-size: 1.5em;
color: #333;
transition: 0.5s;
padding-left: 10px;
}
.sidebar ul li a .text {
position: relative;
height: 70px;
display: flex;
align-items: center;
font-size: 1em;
color: #333;
padding-left: 15px;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: 0.5s;
}
.sidebar ul li.active a .icon {
color: #fff;
}
.sidebar ul li.active a .text {
color: var(--bg);
}
.sidebar ul li:hover a .icon,
.sidebar ul li:hover a .text {
color: var(--bg);
cursor: pointer;
}
.sidebar ul li.active a .icon::before {
content: "";
position: absolute;
inset: 5px;
width: 60px;
height: 60px;
background: var(--bg);
border-radius: 50%;
transition: 0.5s;
}
.sidebar ul li:hover.active a .icon::before {
background: #fff;
}
最终效果如下:
编写用户信息和退出菜单的样式
.bottom {
position: absolute;
bottom: 0;
width: 100%;
}
.imgBx {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
最终效果如下:
编写菜单收起和张开的按钮
.menuToggle {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #31a4ff;
z-index: 1000;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.menuToggle::before {
content: "";
position: absolute;
width: 30px;
height: 3px;
background: #fff;
transform: translateY(-9px);
transition: 0.5s;
box-shadow: 0 9px 0 #fff;
}
.menuToggle::after {
content: "";
position: absolute;
width: 30px;
height: 3px;
background: #fff;
transform: translateY(9px);
transition: 0.5s;
}
.menuToggle.active::before {
transform: translateY(0) rotate(45deg);
box-shadow: 0 0 0 #fff;
}
.menuToggle.active::after {
transform: translateY(0) rotate(-45deg);
}
使用 JavaScript 编写菜单收起和展开效果
let menuToggle = document.querySelector(".menuToggle");
let sidebar = document.querySelector(".sidebar");
menuToggle.onclick = function () {
menuToggle.classList.toggle("active");
sidebar.classList.toggle("active");
};
let Menulist = document.querySelectorAll(".Menulist li");
function activeLink() {
Menulist.forEach((item) => {
item.classList.remove("active");
});
this.classList.add("active");
}
Menulist.forEach((item) => {
item.addEventListener("click", activeLink);
});
完整代码下载
完整代码下载