原生js实现 手机端导航

点击右侧菜单图标按钮，展开导航菜单；
点击一级菜单展开二级菜单；

注：要引入jQuery

<script type="text/javascript">
	//手机端头部导航菜单
	$('.navIcon').click(function() {
    
    
		$(".navIcon").toggleClass('line_move');
		$(".m_menu").toggleClass('show');
	})
	$(".header-mobile-mu .sub-menu .sub-tit").on('click', function() {
    
    
		if($(this).siblings('.sec-list').is(':hidden')) {
    
    
			$(this).addClass('on');
			$(this).siblings('.sec-list').stop().slideDown();
			$(this).parent().siblings('li').children('.sec-list').stop().slideUp().siblings('.tit').removeClass('on');
		} else {
    
    
			$(this).removeClass('on');
			$(this).siblings('.sec-list').stop().slideUp();
		}
	});
</script>

<div id="m_header" class="m_header">
	<div class="m_header_box">
		<div class="logo">
			<a href="#"><img src="" alt=""/>logo</a>
		</div>
		<div class="navIcon">
			<div class="nav_line nav_line1"></div>
			<div class="nav_line nav_line2"></div>
			<div class="nav_line nav_line3"></div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="meun-nav m_menu">
		<div class="header-mobile-mu mobile-mu">
			<div class="sub-menu bocweb-submenu">
				<ul>
					<li>
						<a class="tit" href="#" title="">HOME</a>
					</li>
					<li>
						<div class="tit sub-tit">
							<a href="#">PRODUCT</a>
						</div>

						<div class="sec-list">
							<a href="#">Product</a>
						</div>
						<div class="sec-list">
							<a href="#">Product</a>
						</div>

						<div class="sec-list">
							<a href="#">Product</a>
						</div>
					</li>
					<li>
						<div class="tit sub-tit">
							<a href="#">SOLUTION&amp;CASE</a>
						</div>
						<div class="sec-list">
							<p>
								<a href="#">Power Transmission</a>
							</p>
						</div>
						<div class="sec-list">
							<p>
								<a href="#">Power Communication</a>
							</p>
						</div>
					</li>
					<li>
						<div class="tit sub-tit">
							<a href="#">SERVICE</a>
						</div>
						<div class="sec-list">
							<p>
								<a href="#">Technical Support</a>
							</p>
						</div>
					</li>
					<li>
						<div class="tit sub-tit">
							<a href="#">NEWS</a>
						</div>
					</li>
					<li>
						<div class="tit sub-tit">
							<a href="#">ABOUT US</a>
						</div>
						<div class="sec-list">
							<a href="#">Company profile</a>
						</div>
					</li>
					<li>
						<a href="#" class="tit">CONTACT US</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

.clear{
    
    
clear: both;
}
#m_header {
    
    
	width: 100%;
	display: block;
	height: 70px;
	background-color: #fff;
	position: fixed;
	top: 0;
	z-index: 10;
}
.m_header_box {
    
    
	width: 92%;
	margin: 0 auto;
}
.m_header_box .logo {
    
    
	float: left;
	line-height: 70px;
}
.m_header_box .logo img {
    
    
	max-height: 58px;
	margin-top: 4px;
}
.m_header_box .navIcon {
    
    
	float: right;
	margin-top: 20px;
}
.navIcon:hover {
    
    
	cursor: pointer;
}
.navIcon .nav_line {
    
    
	width: 35px;
	height: 3px;
	background-color: #e7161a;
	border-radius: 10px;
	margin-bottom: 7px;
}
.navIcon .nav_line1 {
    
    
	transform-origin: left top 0;
}
.navIcon .nav_line3 {
    
    
	transform-origin: left bottom 0;
}
.navIcon.line_move .nav_line {
    
    
	transition: all 0.4s;
}
.navIcon.line_move .nav_line1 {
    
    
	margin-bottom: 20px;
	transform: rotate(45deg);
}
.navIcon.line_move .nav_line2 {
    
    
	display: none;
}
.navIcon.line_move .nav_line3 {
    
    
	transform: rotate(-45deg);
}
.mobile-mu {
    
    
	width: 100%;
	height: 100%;
	margin-bottom: 200px;
}
.meun-nav.m_menu {
    
    
	width: 100%;
	height: 0;
	background-color: #fdfdfd;
	overflow-y: scroll;
	transition: all 1s;
	position: absolute;
	z-index: 100;
	top: 70px;
}
.meun-nav.m_menu.show {
    
    
	height: calc(100% + 900px);
}
.mobile-mu .sub-menu {
    
    
	max-height: 100%;
}
.mobile-mu .sub-menu li {
    
    
	border-bottom: 1px solid #d3d3d3;
}
.mobile-mu .sub-menu .tit {
    
    
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 3%;
	line-height: 50px;
	color: #000;
	position: relative;
	box-sizing: border-box;
}
.mobile-mu .sub-menu .sub-tit.on {
    
    
	background-color: #e7161a;
	color: #fff;
}
.mobile-mu .sub-menu .sub-tit.on a {
    
    
	color: #fff;
}
.mobile-mu .sub-menu .sub-tit:after {
    
    
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	background: url(nav_jia.png) no-repeat center;
	background-size: 20px auto;
	position: absolute;
	right: 3%;
	top: 12px;
}
.mobile-mu .sub-menu .sub-tit.on:after {
    
    
	background: url(nav_jian.png) no-repeat center;
	background-size: 26px auto;
}
.mobile-mu .sub-menu .sec-list {
    
    
	padding: 7px 4%;
	display: none;
}
.mobile-mu .sub-menu .sec-list p {
    
    
	font-size: 14px;
}
.mobile-mu .sub-menu .sec-list a {
    
    
	color: #666;
}
.mobile-mu .sub-menu span {
    
    
	margin-left: 10px;
}

效果图如下：
点击图标前：

点击右侧导航图标后：

点击一级导航之后：

如有错误或不足，欢迎各位大佬评论指正。