【菜单折叠效果】这菜单效果千万别让领导看了，一不小心就升职加薪（附源码）
【写在前面】
上周想着冲一波粉丝量（周冲700），但是事与愿违，没办法我只能不断的督促自己多分享，多总结了，那么今天晚上我就好好整理了一篇常见后台管理系统的菜单收缩动态效果，主要是用于后台管理系统。
【涉及知识点】
如何实现菜单折叠效果，web实现菜单收缩效果，CSS实现菜单隐藏展示效果，如何实现主页与菜单动态隐藏展示效果，纯html+css实现菜单动态缩放；
【效果展示】
其实效果展示我主要是想让人能看到自己想要的效果，然后才继续往下看，当然如果你有什么效果想要的可以底下留言哈，博主（csdn-拄杖盲学轻声码）定尽己所能去整理出留言文章。
目录
- 1、实现原理（巧用CSS做JS的事）
- 2、实现过程详解
-
- A、实现小图标的切换（svg+CSS3）
- B、菜单区域与主体区域动态效果实现
- 3、完整代码分享
-
- Html代码
- Css代码
- 4、涨薪专区
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
1、实现原理（巧用CSS做JS的事）
正常思维有以下两种方式来实现：
A、通过点击事件onclick触发，执行不同dom元素的hide()或者show()方法；
B、通过点击事件onclick触发，控制dom元素的CSS属性display的值none/block;
今天我要讲的并不是这两个烂大街的方法，我是想通过纯html+css去实现菜单的隐藏展示效果，完全不需要js代码，具体思路实现如下：
设置好各个dom元素的相对位置与大小
采用label的for属性和input标签实现收缩按钮的动态切换
采用CSS缩放属性来实现主体部分的动态放大与缩小
2、实现过程详解
A、实现小图标的切换（svg+CSS3）
其实这里面我用的是svg图片，其实就是两个横杠，然后我利用CSS3的transform: rotate(xxxdeg);其中里面的xxx表示设置的角度值大小，也就是横线翻转的角度，当两个平行的线都设置不同的翻转角度的时候，就能够形成交叉线，这样也省得去设置什么背景图或者icon啥的，完全用css+svg来制作小图标及其切换效果：
效果图如下所示：
Html代码
<input type="checkbox" id="check" />
<label for="check">
<svg viewBox="0 0 30 30" width="30" height="30">
<path id="one" d="M4 10h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round">path>
<path id="two" d="M4 20h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round">path>
svg> Click me
label>
Css代码
#check:checked+label svg #one {
transform: rotate(45deg);
}
#check:checked+label svg #two {
transform: rotate(-45deg);
}
其实从这里你就能看出来我是自己设置了一个input选择框，然后通过点击操作来调整其svg的翻转角度来实现图标切换效果。
B、菜单区域与主体区域动态效果实现
其实我们的主体就是两大块，左边的菜单和右边的内容页，而且两边我都设置了一个渐变的背景色，渐变的实现主要就是利用CSS3的linear-gradient属性，我（csdn博主-拄杖盲学轻声码）有篇文章专门介绍，大家可以去看看。
今天我要讲的核心是切换效果，我主要是是通过设置以下两种属性：
<1> CSS3中的transform: scale缩放设置，其实原先的主体内容为啥会有一个变小的过程，主要是设置了其缩小比例，
<2> CSS3中的transform: translateX设置了水平方向的偏移值，和菜单宽度保持的差不多就可以；针对菜单如何隐藏我们可以设置其translateX值为-100%；
核心代码：
点击后设置样式针对主体模块：
transform: translateX(25vw) scale(0.7);
点击后设置样式针对菜单模块：
transform: translateX(-100%);
其实设置完这些的话就能达到这样的效果：
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
3、完整代码分享
觉得不错的话烦请点个赞或收藏一下，您的支持将是博主分享源源不断的动力，有其他效果想看的可以留言哈，博主竭尽所能为您而作！！！
Html代码
<body>
<input type="checkbox" id="check" />
<label for="check">
<svg viewBox="0 0 30 30" width="30" height="30">
<path id="one" d="M4 10h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round">path>
<path id="two" d="M4 20h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round">path>
svg> Click me
label>
<aside>
<div class="top">
<h2>菜单管理h2>
<ul>
<li>订单管理li>
<li>流水管理li>
<li>用户管理li>
<li>配置管理li>
<li>颜值管理li>
ul>
div>
<div class="bottom">
<p>© 2023 by CSDN-博主《拄杖盲学轻声码》p>
div>
aside>
<article>
<div class="wrapper">
<div class="content">
<h1>订单业务数据h1>
<p> 一次，马克·吐温应一富翁邀请赴宴，主人为了炫耀他的富有，每道菜上来时，都要说出这道菜的价格。这时侍者端上来一盘葡萄，主人对来宾们说：“哟，好大的葡萄呀！每颗值一百美元呢！”客人们不一会将葡萄吃完了，这时马克·吐温从座位上站起来大声说：“味道真美呀，请你再给我来六美元吧，先生！”
p>
<p> 法官在审问一个在电话亭和人打架的年轻人。“为什么打架?”法官问。“当时我很平静地在电话亭内跟我的女朋友聊天。”年轻人说，“这时那个家伙走过来了，他要打电话，我不让他打，他就把我从电话亭内赶了出来。”“这也怪不得你发脾气了。”法官想了想说。“还不只这样呢，”年轻人补充说，“他还把我的女朋友也从电话亭里赶了出来呢。”
p>
<br>
<h2>更多有趣的前端demo可搜索：CSDN博主 - <span style="color:red">《拄杖盲学轻声码》span><br>h2>
div>
<div class="footer">
<p>跟随我的脚步 <a href="http://www.baofumeng.cn/inithdd/#/rewordData" target="_blank" title="">今日CSDN风云榜a>
p>
div>
div>
article>
body>
Css代码
/* 更多好看特效可关注csdn博主-拄杖盲学轻声码 */
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
line-height: 1.5;
font-family: 'Signika', cursive;
font-weight: 300;
background-color: #21213d;
color: #fff;
}
a {
text-decoration: none;
color: #3369e7;
}
#check {
display: none;
}
#check+label {
position: absolute;
top: 1em;
left: 1em;
z-index: 1;
display: flex;
align-items: center;
cursor: pointer;
}
#check+label::before {
position: absolute;
content: '';
top: -1em;
left: -1em;
width: 100vw;
height: 100vh;
background-color: rgba(33, 33, 61, 0.5);
transform-origin: 50% 50%;
transform: scale(1.3);
visibility: hidden;
opacity: 0;
transition: all 250ms linear;
}
#check+label svg {
margin-right: 0.5em;
}
#check+label svg path {
transform-origin: 35% 50%;
transition: transform 166.6666666667ms cubic-bezier(0.06, 0.63, 0.91, 0.66);
}
#check:checked+label~aside {
transform: none;
}
#check:checked+label::before {
left: calc(25vw - 1em);
transform: scale(1);
visibility: visible;
opacity: 1;
}
@media (max-width: 576px) {
#check:checked+label::before {
left: calc(50vw - 1em);
}
}
#check:checked+label svg #one {
transform: rotate(45deg);
}
#check:checked+label svg #two {
transform: rotate(-45deg);
}
#check:checked+label~article {
z-index: -1;
transform: translateX(25vw) scale(0.7);
border-radius: 0.25em;
user-select: none;
pointer-events: none;
}
aside,
article {
padding: 2.5em 1em 0.25em;
transition: all 250ms cubic-bezier(0.06, 0.63, 0.91, 0.66);
}
aside {
position: absolute;
width: 25vw;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-image: linear-gradient(45deg, #3369e7, #2ede98);
transform: translateX(-100%);
}
@media (max-width: 576px) {
aside {
width: 50vw;
}
}
article {
position: relative;
transform-origin: 10% 50%;
width: 100%;
background-image: linear-gradient(45deg, #1cc7d0, #2ede98);
}
article .wrapper {
margin: auto;
padding: 2em;
max-width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
article .wrapper h1 {
margin: 0;
}
article .wrapper .footer {
text-align: right;
}
4、涨薪专区
有了这个效果，还愁领导不给你涨工资么，有了这个效果，还愁找不到对象？
喜欢博主的话可以上榜一探究竟，博主专设皇榜给大家查阅，喜欢的可以点击此处查看哟。