6款html5手机顶部导航菜单遮罩显示效果



150 599 200



特效描述:6款html5 手机顶部 导航菜单 遮罩显示效果,手机顶部导航菜单遮罩显示效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

3. HTML代码

<div class="container">
  <!-- Style #1 -->
  <div class="iphone style-1">
	<div class="iphone__item">#1</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #1 -->
  <!-- Style #2 -->
  <div class="iphone style-2">
	<div class="iphone__item">#2</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #2 -->
  <!-- Style #23-->
  <div class="iphone style-3">
	<div class="iphone__item">#3</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #3 -->
  <!-- Style #4-->
  <div class="iphone style-4">
	<div class="iphone__item">#4</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #4 -->
  <!-- Style #5-->
  <div class="iphone style-5">
	<div class="iphone__item">#5</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #5 -->
  <!-- Style #6-->
  <div class="iphone style-6">
	<div class="iphone__item">#6</div>
	<div class="iphone__power-btn"></div>
	<div class="iphone__left-btn"></div>
	<div class="iphone__details"></div>
	<div class="iphone__screen">
	  <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
	  <nav class="nav">
		<ul class="nav__list">
		  <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">About Us</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
		  <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li>
		</ul>
	  </nav>
	  <div class="iphone__content"></div>  
	</div>
	<div class="iphone__home-btn"></div>
  </div>
  <!-- /Style #6 -->
</div>
<script type="text/javascript">
$(function(){
	$('.nav__trigger').on('click', function(e){
	  e.preventDefault();
	  $(this).parent().toggleClass('nav--active');
	});
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到