简单的手机侧边栏导航

今天帮朋友改响应式网站，其实响应式网站其他地方只要用媒体查询重写一下即可，但是导航部分是比较难处理的，一般都是进行重写，当然网上有很多插件可用，但是代码硬肿，没必要为了那么点功能就去使用插件，我就随便写了一个，记录一下，对美感没太大要求的站点可以直接使用，代码如下：

css部分

* {
	margin: 0;
	padding: 0;
}

.m_nav {
	position: relative;
	height: 40px;
	width: 100%;
	background: #999;
}

.m_nav .m_nav_icon {
	position: relative;
	float: left;
	margin-left: 5px;
	width: 40px;
	height: 30px;
	box-sizing: border-box;
	margin-top: 5px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
}

.m_nav .m_nav_icon:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 5px;
	background: #fff;
	left: 0;
	top: 8px;
}

.m_nav .m_nav_icon.active {
	border: none;
	transition: all ease-in .5s;
}

.m_nav .m_nav_icon.active:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 5px;
	background: #fff;
	left: 0;
	top: 10px;
	transform: rotate(45deg);
}

.m_nav .m_nav_icon.active:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 5px;
	background: #fff;
	left: 0;
	top: 10px;
	transform: rotate(-45deg);
}

.m_nav .m_nav_nav {
	position: absolute;
	z-index: 999;
	width: 200px;
	height: 100vh;
	background: #999;
	left: 0;
	top: 40px;
	display: none;
}

.m_nav .m_nav_nav ul {
	list-style: none;
	text-indent: 5px;
	overflow: hidden;
}

.m_nav .m_nav_nav ul li {
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-bottom: 1px solid #aaa;
}

.m_nav .m_nav_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}

HTML部分

<div class="m_nav">
	<div class="m_nav_icon"></div>
	<div class="m_nav_nav">
		<ul>
			<li>
				<a href="">1</a>
			</li>
			<li>
				<a href="">2</a>
			</li>
			<li>
				<a href="">3</a>
			</li>
			<li>
				<a href="">4</a>
			</li>
			<li>
				<a href="">5</a>
			</li>
			<li>
				<a href="">6</a>
			</li>
			<li>
				<a href="">7</a>
			</li>
		</ul>
	</div>
</div>

JS部分：

$(function() {
	$('.m_nav_icon').click(function() {
		$(this).toggleClass('active');
		$('.m_nav_nav').animate({
			width: 'toggle'
		}, 500);
	})

})