做一个自动隐藏的侧边栏吧！

这个做Web网页的系列文章，我会慢慢更新的。这也是对我使用Web前端技术的练习和总结（顺便练练用Markdown的写作）。如果大家觉得好的话，欢迎收藏、点赞、关注！

这个演示的图片如下：
动态图片有点大，所以一时打开会比较卡凑活着看吧：http://47.96.224.250/m/demo.gif
也可以自己把下面两个图像脑洞补帧：

演示的链接如下：
服务器地址：http://47.96.224.250/m/1.html
由于我没有使用响应式布局，可能排版会乱，建议使用电脑观看或者手机浏览器UA调整成电脑模式

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：

使用 Microsoft 的 CDN：

再给几份文档供参考：
jQuery 教程 | 菜鸟教程
jQuery API 中文文档
jQuery中文网

• 引入外部样式表：

这里采用的是ionicons图标库的图标
我采用的是国外的CDN，国内的也可以使用，参考文档：ionic icon(图标) | 菜鸟教程

2.放入图标，写CSS样式

• 图标自己上ionicons图标库看看，引用采用的是锚点的class方式引入，不采用官网给的JS脚本标签引入，点开图标下面会显示默认“智能引入”，在上面有个USAGE，滑倒最低有个class引入方法，基本上操作几次，你看看“智能引入”图标英文名字就知道怎么写了。
  
• 写CSS样式：
  这个这个，具体咱也不好给你讲，你搜搜标签、属性大概就知道什么意思，就会用了（英文字面意思）
  主要讲讲这个：

.btn:before{
    content:'\f32a';
}
.btnc:before{
    content:'\f2c0';
}

在html中是这样的：

那为啥会显示这样的图标呢？

因为采用了webfont。
在css里面，如果想使用某个字体，但是又担心用户电脑上没有，就可以使用font-face属性从服务器上引用这组字体。具体怎么用，搜一下font-face就很清楚了。
所以这里图标也采用了十六进制编码格式给“自定义”编码进去了，所以引用后就可以显示，注意这里别忘引用这个“字符库”,放在.btn{}中。

font-family: ionicons; 

参考下这个文档吧：
font-face | 菜鸟教程
我具体获得这个值，是在官网图标库通过开发者工具检查元素得到的。

（我觉得这样用简单，当然你也可以用其他方法）

3.写JS脚本

由于这个事件很简单，所以直接写到html中就可以了，具体怎么用，在第一中给有jQuery相关文档，可以参考一下！

算了，简要介绍下toggleClass()吧。

• 定义
  toggleClass()就是所谓的切换效果，对设置或移除被选元素的一个或多个类进行切换。
• 语法

$(selector).toggleClass(class,switch)

所以这么一看上面的代码，不就是在点击事件中，把两个模块预先写好的样式更换就行了，so easy对吧！

---

源代码：

• index.html:

• style.css:

@import 'https://unpkg.com/[email protected]/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';
}