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

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);
});

完整代码下载

完整代码下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/532217.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

进程间通信 (匿名管道)

一、进程间通信的概念 进程间通信是一个进程把自己的数据交给另一个进程&#xff0c;它可以帮助我们进行数据传输、资源共享、通知事件和进程控制。 进程间通信的本质是让不同的进程看到同一份资源。因此&#xff0c;我们要有&#xff1a; 1、交换数据的空间。2、这个空间不能由…

CNN-Transformer时间序列预测

部分代码&#xff1a; # CNN-Transformer class CNNTransformerEncoder(nn.Module):def __init__(self, input_features, transformer_encoder_heads,embedding_features, cnn_kernel_size, dim_feedforward_enc, n_encoder_layer):super(CNNTransformerEncoder, self).__init…

分析染色体级别的基因组装配揭示了六倍体栽培菊花的起源和进化-文献精读-7

Analyses of a chromosome-scale genome assembly reveal the origin and evolution of cultivated chrysanthemum 分析染色体级别的基因组装配揭示了栽培菊花的起源和进化 六倍体植物基因组的文献&#xff0c;各位同仁还有什么有特色的基因组评论区留言~ 摘要 菊花&#xf…

spring boot —— Spring-Cloud-Zuul(网关服务getway),kafka笔记

一、 引入zuul依赖&#xff1a; org.springframework.cloud spring-cloud-starter-zuul 二、创建应用主类。使用EnableZuulProxy注解开启zuul的API网关服务功能&#xff1a; EnableZuulProxy SpringCloudApplication public class Application { public static void mai…

【漏洞复现】WordPress Welcart 任意文件读取漏洞(CVE-2022-4140)

0x01 产品简介 Welcart 是一款免费的 WordPress 电子商务插件。Welcart 具有许多用于制作在线商店的功能和自定义设置。您可以轻松创建自己的原始在线商店。 0x02 漏洞概述 Welcart存在任意文件读取漏洞&#xff0c;未授权的攻击者可以通过该漏洞读取任意文件&#xff0c;获…

【RAG实践】Rerank,让大模型 RAG 更近一步

RAGRerank原理 上一篇【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人 我们介绍了什么是RAG&#xff0c;以及如何基于LLaMaIndex和Qwen1.5搭建基于本地知识库的问答机器人&#xff0c;原理图和步骤如下&#xff1a; 这里面主要包括包括三个基本步骤&#…

【无标题】系统思考—心智模式

“直到你使无意识变为有意识&#xff0c;它将指导你的生活并且你会称之为命运。”—卡尔荣格 心智模式深藏于我们内心之中&#xff0c;它潜移默化地影响着我们对世界的理解和判断。往往这些影响是如此隐蔽&#xff0c;以至于我们自己都未必察觉到是什么在驱动我们的选择、决策…

ES7-10:async和await、异步迭代..

1-ES7新特性 indexof如果没有就返回-1&#xff0c;有就返回索引 如果仅仅查找数据是否在数组中,建议使用includes,如果是查找数据的索引位置,建议使用indexOf更好一些 2-ES8-async和await 所有的需要异步处理的Promise对象都写在async中await等待结果 async、await 使异步操…

【MATLAB源码-第184期】基于matlab的FNN预测人民币美元汇率 输出预测图误差图RMSE R2 MAE MBE等指标

操作环境&#xff1a; MATLAB 2022a 1、算法描述 前馈神经网络&#xff08;Feedforward Neural Network, FNN&#xff09;是最简单也是应用最广泛的人工神经网络之一。在许多领域&#xff0c;尤其是数据预测方面&#xff0c;FNN已经展现出了卓越的性能和强大的适应性。 一、…

贪心算法|406.根据身高重建队列

力扣题目链接 class Solution { public:static bool cmp(const vector<int>& a, const vector<int>& b) {if (a[0] b[0]) return a[1] < b[1];return a[0] > b[0];}vector<vector<int>> reconstructQueue(vector<vector<int>…

鸿蒙应用开发之图案密码锁组件

前面学习了导航组件,现在来学习另一个密码设置和验证组件,这种组件比较常用。因为当用触屏手机之后,屏幕上就可以滑动操作,比普通PC电脑要多一些功能了。早前的密码都是输入数字,没有滑动输入九宫格的密码。 大体如下面的界面: 采用这种密码,一般情况下是不用记住数字,…

Vue - 你知道Vue中key的工作原理吗

难度级别:中级及以上 提问概率:80% 在Vue项目开发中,并不推荐使用索引做为key,以为key必须是唯一的,可以使用服务端下发的唯一ID值,也不推荐使用随机值做为key,因为如果每次渲染都监听到不一样的key,那么节点将无法复用,这与Vue节省…

Kotlin:常用标准库函数(let、run、with、apply、also)

一、let 扩展函数 Kotlin标准库函数let可用于范围确定和空检查。当调用对象时&#xff0c;let执行给定的代码块并返回其最后一个表达式的结果。对象可以通过引用(默认情况下)或自定义名称在块中访问。 let扩展函数源码 let.kt文件代码 fun main() {println("isEmpty $is…

企业如何防止内部人员泄密(实用方法分享)

“老干妈配方遭泄露”事件你们一定有所耳闻吧&#xff01; 2016年5月&#xff0c;“老干妈”工作人员发现&#xff0c;本地另一家食品加工企业生产的一款产品与老干妈品牌同款产品相似度极高。 经查&#xff0c;涉嫌窃取此类技术的企业从未涉足该领域&#xff0c;绝无此研发能…

C/S医学检验LIS实验室信息管理系统源码 医院LIS源码

LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化&#xff0c;检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据库中&#xff0c;使医生能够通过医生工作站方便、及时地…

基于Java+SpringBoot+Vue音乐网站(源码+文档+部署+讲解)

一.系统概述 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;音乐管理展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为…

[【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSON2WEB前端框架搭建 【J…

06 Php学习:字符串

PHP 中的字符串变量 在 PHP 中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储文本数据。字符串变量可以包含字母、数字、符号等字符&#xff0c;并且可以进行各种操作和处理。以下是关于 PHP 中字符串变量的一些重要信息&#xff1a; 定义字符串变量&#xff1…

3 突破编程_前端_SVG(rect 矩形)

1 rect 元素的基本属性和用法 在SVG中&#xff0c;<rect> 元素用于创建矩形。 <rect> 元素有一些基本的属性&#xff0c;可以用来定义矩形的形状、位置、颜色等。以下是这些属性的详细解释&#xff1a; x 和 y &#xff1a;这两个属性定义矩形左上角的位置。 x …

Day:005 | Python爬虫:高效数据抓取的编程技术(爬虫效率)

爬虫之多线程-了解 单线程爬虫的问题 因为爬虫多为IO密集型的程序&#xff0c;而IO处理速度并不是很快&#xff0c;因此速度不会太快如果IO卡顿&#xff0c;直接影响速度 解决方案 考虑使用多线程、多进程 原理&#xff1a; 爬虫使用多线程来处理网络请求&#xff0c;使用线程…