这个演示的图片如下：
也可以自己把下面两个图像脑洞补帧：
##1.搭建网页基本框架，并引入外部样式表和脚本
- 页面结构大致是这样(详见底部源码)：
body>(div.sidebar>li*n>a.icon)+a.btn- 接下来引用下外部脚本：
因为需要有点击事件，所以这里我直接采用JQuery来实现。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
我参考了w3school jQuery教程，直接使用最简单的CDN，来引用外部的脚本。
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
使用 Google 的 CDN：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>使用 Microsoft 的 CDN：
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>再给几份文档供参考：
jQuery 教程 | 菜鸟教程jQuery API 中文文档jQuery中文网
- 引入外部样式表：
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">这里采用的是ionicons图标库的图标
我采用的是国外的CDN，国内的也可以使用，参考文档：ionic icon(图标) | 菜鸟教程
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
##2.放入图标，写CSS样式
- 图标自己上ionicons图标库看看，引用采用的是
<a>锚点的class方式引入，不采用官网给的JS脚本标签引入，点开图标下面会显示默认“智能引入”，在上面有个USAGE，滑倒最低有个class引入方法，基本上操作几次，你看看“智能引入”图标英文名字就知道怎么写了。 - 写CSS样式：
这个这个，具体咱也不好给你讲，你搜搜标签、属性大概就知道什么意思，就会用了（英文字面意思）
主要讲讲这个：
.btn:before{
content:'\f32a';
}
.btnc:before{
content:'\f2c0';
}在html中是这样的：
<a class="btn"></a>那为啥会显示这样的图标呢？
因为采用了webfont。
在css里面，如果想使用某个字体，但是又担心用户电脑上没有，就可以使用font-face属性从服务器上引用这组字体。具体怎么用，搜一下font-face就很清楚了。
所以这里图标也采用了十六进制编码格式给“自定义”编码进去了，所以引用后就可以显示，注意这里别忘引用这个“字符库”,放在.btn{}中。
font-family: ionicons;参考下这个文档吧：
font-face | 菜鸟教程 我具体获得这个值，是在官网图标库通过开发者工具检查元素得到的。
（我觉得这样用简单，当然你也可以用其他方法）
##3.写JS脚本
由于这个事件很简单，所以直接写到html中就可以了，具体怎么用，在第一中给有jQuery相关文档，可以参考一下！
<script type="text/javascript">
$('.btn').on('click',function(){
$('.btn').toggleClass('btnc');
$('.sidebar').toggleClass('side');
})
</script>算了，简要介绍下toggleClass()吧。
- 定义
toggleClass()就是所谓的切换效果，对设置或移除被选元素的一个或多个类进行切换。 - 语法
$(selector).toggleClass(class,switch)
所以这么一看上面的代码，不就是在点击事件中，把两个模块预先写好的样式更换就行了，so easy对吧！
##源代码：
- index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏</title>
<link rel="stylesheet" href="style.css">
<!--jQuery code-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="" class="icon ion-logo-android"></a></li>
<li><a href="" class="icon ion-logo-playstation"></a></li>
<li><a href="" class="icon ion-logo-windows"></a></li>
<li><a href="" class="icon ion-logo-instagram"></a></li>
<li><a href="" class="icon ion-logo-python"></a></li>
</ul>
</div>
<a class="btn"></a>
<script type="text/javascript">
$('.btn').on('click',function(){
$('.btn').toggleClass('btnc');
$('.sidebar').toggleClass('side');
})
</script>
</body>
</html>- style.css:
@import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css';
body,html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
.sidebar{
float: left;
width: 100px;
height: 100%;
margin-left: -100px;
background: #2c3e50;
overflow:hidden;
transition: 0.8s all;
}
.side{
margin-left: 0;
}
.sidebar ul{
margin: 0;
padding: 0;
}
.sidebar ul li{
list-style: none;
}
.sidebar ul li a{
text-decoration: none;
color: white;
height: 80px;
width: 100%;
font-size: 40px;
line-height: 80px;
text-align: center;
display: block;
transition: 0.6s all;
}
.sidebar ul li a:hover{
background: #34495e;
}
.btn{
float: left;
padding: 0 10px;
font-size: 40px;
text-decoration: none;
color: #2c5e50;
font-family: ionicons;
cursor: pointer;
}
.btn:before{
content:'\f32a';
}
.btnc:before{
content:'\f2c0';
}
