<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6款漂亮的html5手机导航菜单代码</title>
<script src="js/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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 src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.nav__trigger').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav--active');
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
6款漂亮的html5手机导航菜单代码
3星 · 超过75%的资源 129 浏览量
2020-06-05
21:08:27
上传
评论
收藏 39KB ZIP 举报 
6款漂亮的html5手机导航菜单代码.zip （5个子文件） 
index.html 6KB
less 
style.less 7KB js modernizr.js 14KB jquery-2.1.1.min.js 82KB css style.css 9KB资源评论
abill4252020-11-26效果一般，是从懒人之家网站里搬运来的
