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

最新推荐文章于 2025-04-08 19:47:09 发布

林中白虎

最新推荐文章于 2025-04-08 19:47:09 发布

阅读量1.3k

点赞数 16

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_33003143/article/details/137336902

版权

本文详细介绍了如何使用CSS和JavaScript创建一个可伸缩的导航侧边栏菜单，包括曲面圆角的实现、Ionicons图标的引入、菜单的显示与隐藏以及响应式设计。同时展示了菜单项的样式和切换效果的编写过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

最低0.47元/天解锁文章