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

最新推荐文章于 2024-07-18 15:48:23 发布

耀南.

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量1.9k

点赞数 2

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css html

本文链接：https://blog.csdn.net/YN2000609/article/details/133621319

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

更多前端简单小组件尽在主页！喜欢可以收藏哦！

<!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>