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

81 阅读 0 评论 54 点赞

我是靠谱客的博主帅气大山，这篇文章主要介绍做一个自动隐藏的侧边栏吧！，现在分享给大家，希望可以做个参考。

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

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

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

1.搭建网页基本框架，并引入外部样式表和脚本

页面结构大致是这样(详见底部源码)：

复制代码

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：

复制代码

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

使用 Microsoft 的 CDN：

复制代码

1
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

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

引入外部样式表：

复制代码

1
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">

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

复制代码

1
<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样式：
这个这个，具体咱也不好给你讲，你搜搜标签、属性大概就知道什么意思，就会用了（英文字面意思）
主要讲讲这个：

复制代码

1
2
3
4
5
6
.btn:before{
content:'f32a';
}
.btnc:before{
content:'f2c0';
}

在html中是这样的：

复制代码

1
<a class="btn"></a>

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

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

复制代码

1
font-family: ionicons;

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

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

3.写JS脚本

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

复制代码

1
2
3
4
5
6
<script type="text/javascript">
$('.btn').on('click',function(){
$('.btn').toggleClass('btnc');
$('.sidebar').toggleClass('side');
})
</script>

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

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

复制代码

1
$(selector).toggleClass(class,switch)

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

源代码：

index.html:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 1 <!DOCTYPE html>
 2 <html>
 3
<head>
 4
<meta charset="utf-8">
 5
<title>侧边栏</title>
 6
<link rel="stylesheet" href="style.css">
 7
<!--jQuery code-->
 8
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
 9
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
10
</head>
11
<body>
12
<div class="sidebar">
13
<ul>
14
<li><a href="" class="icon ion-logo-android"></a></li>
15
<li><a href="" class="icon ion-logo-playstation"></a></li>
16
<li><a href="" class="icon ion-logo-windows"></a></li>
17
<li><a href="" class="icon ion-logo-instagram"></a></li>
18
<li><a href="" class="icon ion-logo-python"></a></li>
19
</ul>
20
</div>
21
<a class="btn"></a>
22
<script type="text/javascript">
23 
$('.btn').on('click',function(){
24 
$('.btn').toggleClass('btnc');
25 
$('.sidebar').toggleClass('side');
26 
})
27
</script>
28
</body>
29 </html>

style.css:

复制代码

1 @import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css';
 2 body,html{
 3 
margin: 0;
 4 
padding: 0;
 5 
height: 100%;
 6 
width: 100%;
 7 
font-family: sans-serif;
 8 }
 9 .sidebar{
10 
float: left;
11 
width: 100px;
12 
height: 100%;
13 
margin-left: -100px;
14 
background: #2c3e50;
15 
overflow:hidden;
16 
transition: 0.8s all;
17 }
18 .side{
19 
margin-left: 0;
20 }
21 .sidebar ul{
22 
margin: 0;
23 
padding: 0;
24 }
25 .sidebar ul li{
26 
list-style: none;
27 }
28 .sidebar ul li a{
29 
text-decoration: none;
30 
color: white;
31 
height: 80px;
32 
width: 100%;
33 
font-size: 40px;
34 
line-height: 80px;
35 
text-align: center;
36 
display: block;
37 
transition: 0.6s all;
38 }
39 .sidebar ul li a:hover{
40 
background: #34495e;
41 }
42 .btn{
43 
float: left;
44 
padding: 0 10px;
45 
font-size: 40px;
46 
text-decoration: none;
47 
color: #2c5e50;
48 
font-family: ionicons;
49 
cursor: pointer;
50 }
51 .btn:before{
52 
content:'f32a';
53 }
54 .btnc:before{
55 
content:'f2c0';
56 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 1 @import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css';
 2 body,html{
 3 
margin: 0;
 4 
padding: 0;
 5 
height: 100%;
 6 
width: 100%;
 7 
font-family: sans-serif;
 8 }
 9 .sidebar{
10 
float: left;
11 
width: 100px;
12 
height: 100%;
13 
margin-left: -100px;
14 
background: #2c3e50;
15 
overflow:hidden;
16 
transition: 0.8s all;
17 }
18 .side{
19 
margin-left: 0;
20 }
21 .sidebar ul{
22 
margin: 0;
23 
padding: 0;
24 }
25 .sidebar ul li{
26 
list-style: none;
27 }
28 .sidebar ul li a{
29 
text-decoration: none;
30 
color: white;
31 
height: 80px;
32 
width: 100%;
33 
font-size: 40px;
34 
line-height: 80px;
35 
text-align: center;
36 
display: block;
37 
transition: 0.6s all;
38 }
39 .sidebar ul li a:hover{
40 
background: #34495e;
41 }
42 .btn{
43 
float: left;
44 
padding: 0 10px;
45 
font-size: 40px;
46 
text-decoration: none;
47 
color: #2c5e50;
48 
font-family: ionicons;
49 
cursor: pointer;
50 }
51 .btn:before{
52 
content:'f32a';
53 }
54 .btnc:before{
55 
content:'f2c0';
56 }