响应式移动端网页下拉式导航HTML+jQuery+CSS代码

响应式Web网页小屏设备访问时，点击导航按钮，下拉显示网页导航的效果代码。

HTML代码

PS：HTML代码中的<i class="fas fa-home"></i>使用的是FontAwesome字体图标，可以选择删除。

<header class="header">
	<h1 class="logo">
		<a title="Web前端" href="https://www.tddx.net/" style="background-image:url(https://www.tddx.net/images/logo.png);">neirong.org</a>
	</h1>
	<div class="navBtn">
		<i class="fas fa-bars"></i>
	</div>
</header>
<nav class="nav">
<ul>
	<li><a href="#"><i class="fas fa-home"></i> 博客首页</a></li>
	<li><a href="#"><i class="fas fa-newspaper"></i> 行业新闻</a></li>
	<li><a href="#"><i class="fas fa-mobile-alt"></i> 智能手机</a></li>
	<li><a href="#"><i class="fas fa-desktop"></i> 电脑平板</a>
		<ul>
			<li><a href="#"><i class="fas fa-mobile-alt"></i> 二级菜单</a></li>
			<li><a href="#"><i class="fas fa-desktop"></i> 二级菜单</a></li>
		</ul>
	</li>
		<li><a href="#"><i class="fas fa-camera"></i> 数码相机</a></li>
		<li><a href="#"><i class="fas fa-copyright"></i> 版权声明</a></li>
		<li><a href="#"><i class="fas fa-file-contract"></i> 联系方式</a></li>
		<li><a href="#"><i class="fas fa-address-card"></i> 网站简介</a></li>			
	</ul>
	<div class="clear"></div>
</nav>

CSS代码：

* {-webkit-tap-highlight-color:transparent;}
body, header, nav, ul {display:block; margin:0; padding:0;}
li {list-style: none; padding:0; margin:0;}
.header {background-color:#fff; position:relative; z-index:9; padding:0 3.125%;}

.navBtn {position:absolute; right:3.125%; top:50%; color:#2e2e2e; font-size:24px; cursor:pointer; width:35px; text-align:center; height:35px; line-height:35px; margin-top:-17.5px; overflow:hidden; display:block;}
	
.nav {position:fixed; left:0; top:-100%; width:100%; height:100%; background-color:#fff; z-index:7; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:top .3s;}
.nav.open {top:0;}
.nav ul {margin-top:96px;}
.nav li {border-bottom:1px solid #eee; line-height:45px; position:relative;}
.nav li a {padding:0 3.125%; color:#333; display:block;}
.nav li a:hover, .nav li.on > a, .nav li.cur > a {background-color:transparent;}
.nav li ul {position:static; left:auto; top:auto; width:auto; margin:0; display:none;}
.nav li li {border-bottom:none; border-top:1px solid #e6e6e6;}
.nav li li a {text-indent:2em;}
.nav li em {display:block; position:absolute; top:0; right:0; height:45px; width:45px;}
.nav li em:after {content:''; display:block; width:9px; height:9px; border-right:1px solid #aaa; border-bottom:1px solid #aaa; position:absolute; left:50%; top:50%; transform:rotate(-45deg); margin:-5px 0 0 -6.5px; transition:all .3s;}
.nav li em.open:after {transform:rotate(45deg); margin:-6px 0 0 -6px;}

jQuery代码：

function unableScroll() {
	var top = $(document).scrollTop();
	$(document).on('scroll.unable',function (e) {
		$(document).scrollTop(top);
	});
}
function enableScroll() {
	$(document).unbind('scroll.unable');
}
$(function(){
	$('.nav li').each(function(){		
		if($(this).children('ul').length > 0){
			$(this).children('a').after('<em></em>');
		}
	});	
	$('.navBtn').click(function(){		
		if($('.nav').hasClass('open')){
			$('.nav').removeClass('open');
			enableScroll();
		}else{
			$('.nav').addClass('open');
			unableScroll();
		}		
	});	
	$('.nav li em').click(function(){
		$(this).toggleClass('open').siblings('ul').stop().slideToggle('fast').parent().siblings('li').children('em').removeClass('open').siblings('ul').slideUp('fast');
	});
});

显示样式自行调整。