前端实战小案例--带隐藏切换的侧边导航栏

最新推荐文章于 2023-02-15 10:41:41 发布

朽木自雕xmzd

最新推荐文章于 2023-02-15 10:41:41 发布

阅读量2.2k

点赞数 7

分类专栏：前端实战案例文章标签：前端实战案例

本文链接：https://blog.csdn.net/qq_16687863/article/details/102920659

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

前端实战小案例--带隐藏切换的侧边导航栏

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>带隐藏切换的侧边导航栏</title>
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	</head>
	<style>
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		.slidebar{
			float: left;
			width: 100px;
			height: 100%;
			background: #34495e;
			color: #ecf0f1;
			margin-left: -100px;
			transition: 0.8s;
		}
		.slide{
			margin-left: 0;
		}
		.slidebar ul{
			position: relative;
			margin: 0;
			padding: 0;
		}
		.slidebar ul li{
			list-style: none;
			display: block;
			width: 100px;
			text-align: center;
			font-size: 30px;
			padding: 10px 0;
			cursor: pointer;
			transition: 0.8s;
		}
		.slidebar ul li span{
			width: 100%;
		}
		.slidebar ul li:hover{
			background: #1abc9c;
		}
		.ctrl-btn{
			float: left;
			font-size: 30px;
			cursor: pointer;
		}
	</style>
	<script src="../jquery-2.1.1/jquery.js"></script>
	<script>
		$(function(){
			$(".ctrl-btn").on("click", function(){
				$(this).toggleClass("fa-reorder");
				$(this).toggleClass("fa-remove");
				$(".slidebar").toggleClass("slide");
			})
		})
	</script>
	<body>
		<div class="slidebar">
			<ul>
				<li><span class="fa fa-chrome"></span></li>
				<li><span class="fa fa-folder-open"></span></li>
				<li><span class="fa fa-envelope"></span></li>
				<li><span class="fa fa-youtube-play"></span></li>
				<li><span class="fa fa-steam-square"></span></li>
				<li><span class="fa fa-linux"></span></li>
			</ul>
		</div>
		<div class="ctrl-btn fa fa-reorder"></div>
</html>

朽木自雕xmzd

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--带隐藏切换的侧边导航栏

带隐藏切换的侧边导航栏--前端实战小案例想练习更多前端案例，请进个人主页，点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0！谢谢了！不积跬步无以至千里，不积小流无以成江海。效果图如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"&...
复制链接

扫一扫