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

叶筱

已于 2023-03-28 16:21:30 修改

阅读量509

点赞数

文章标签： javascript ajax 前端

于 2023-03-28 15:36:59 首次发布

本文链接：https://blog.csdn.net/qq_34373560/article/details/129817425

版权

这个演示的图片如下：
也可以自己把下面两个图像脑洞补帧：

##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';
}