6款漂亮的html5手机导航菜单代码
2024-12-26 21:19
<!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=https://download.csdn.net/download/weixin_38704922/"js/modernizr.js" type="text/javascript"></script>
<link 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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">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=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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">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=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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">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=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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">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=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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">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=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__link" href=https://download.csdn.net/download/weixin_38704922/"#">Home</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">About Us</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Portfolio</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href=https://download.csdn.net/download/weixin_38704922/"#">Contact Us</a></li>
</ul>
</nav>
<div class="iphone__content"></div>
</div>
<div class="iphone__home-btn"></div>
</div>
<!-- /Style #6 -->
</div>
<script src=https://download.csdn.net/download/weixin_38704922/"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=https://download.csdn.net/download/weixin_38704922/"http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>