侧栏遮罩

jQuery写一个简单的侧栏遮罩

点击菜单按钮滑出侧栏菜单，当鼠标点击页面侧栏菜单消失。效果：

1.html代码：

<!-- 外包裹 -->
<div class="warp">
	<!-- 头部导航栏 -->
	<header class="header">
		<nav class="nav">
			<ul>
				<li><a id="menu" href="#">菜单</a></li>
				<li><a href="#">三页</a></li>
				<li><a href="#">副页</a></li>
				<li><a href="#">首页</a></li>		
			</ul>
		</nav>
	</header>
	<!-- 侧栏 -->
	<div class="side">
		<ul>
			<li><a href="#">第一个</a></li>
			<li><a href="#">第二个</a></li>
			<li><a href="#">第三个</a></li>
			<li><a href="#">第四个</a></li>
			<li><a href="#">第五个</a></li>
		</ul>
	</div>
</div>
<!-- 遮罩 -->
<div class="mark"></div>

2.css代码块

<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		
		.header{
			width: 100%;
			height: 40px;
			background: #808080;
		}
		a{
			text-decoration: none;
			color: #ddd;
		}
		.nav ul li{
			list-style: none;
			float:right;
			text-align: center;
			margin: 10px 10px 0px;
		}
		.mark{
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			background: rgba(0,0,0,0.5);
			display: none;
		}
		.side{
			z-index: 3;
			width: 200px;
			position: fixed;
			top: 0px;
			right: -200px;
			bottom: 0px;
			background: black;
			opacity: 0.6;
			transition: 0.8s;/*过渡动画时间*/
		}
		.side ul li{
			list-style: none;
			width: 100%;
			margin: 20px 0px 0px;
			text-align: center;
		}
		.side ul li:hover{
			background: #808080;
		}
	</style>

3.jQuery

<!--引入jQuery-->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// 点击菜单遮罩和侧栏显示
			$('#menu').click(function(){
				$('.mark').fadeIn();
				$('.side').css('right',0);
			})
			// 点击页面遮罩和侧栏消失
			$('.mark').click(function(){
				$('.mark').fadeOut();
				$('.side').css('right',-200);
			})
		})
	</script>

这是我的第一篇文字，很初级，希望大家指出批评哟！
…文章结束…