<!doctype html>
<html lang="zh" class="no-js">
<head>
<m
eta charset="UTF-8">
<m
eta http-equiv="X-UA-Compatible" co
ntent="IE=edge,chrome=1">
<m
eta name="viewport" co
ntent="width=device-width, initial-scale=1.0">
<title>6款漂亮的html5手机导航菜单代码</title>
<s
cript src=https://download.csdn.net/download/weixin_38704922/"js/modernizr.js" type="text/javas
cript"></s
cript>
<l
ink rel="stylesheet" href=https://download.csdn.net/download/weixin_38704922/"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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact 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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact 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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact 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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact 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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact 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=https://download.csdn.net/download/weixin_38704922/"#" class="nav__trigger"><span class="nav__icon"></span></a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">A
bout Us</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__l
ink" href=https://download.csdn.net/download/weixin_38704922/"#">Co
ntact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #6 -->
</div>
<s
cript src=https://download.csdn.net/download/weixin_38704922/"js/jquery-2.1.1.min.js" type="text/javas
cript"></s
cript>
<s
cript type="text/javas
cript">
$(function(){
$('.nav__trigger').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav--active');
});
})
</s
cript>
<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=https://download.csdn.net/download/weixin_38704922/"http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
