原生js实现 手机端导航_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

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

点击右侧导航图标后：

点击一级导航之后：

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