当前位置：首页 > news >正文

CSS 实现伸缩导航仪表板侧边栏菜单

news 来源：原创 2024/5/18 2:52:48

CSS 实现伸缩导航仪表板侧边栏菜单

效果展示

展开状态
收起状态

CSS 知识点

回顾曲面圆角的实现知识点

字体库准备

菜单的图标使用的是ionicons的图标库，所以需要页面需要引入对应的文件。

<scripttype="module"src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<scriptnomodulesrc="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);
});