<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>html5手机端上下左右滑动菜单代码 - 网页模板</title>
<link href="css/nav_sytle.css" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/nav.js"></script>
</head>
<body>
<div class="con">
<button class="left">左抽屉菜单</button>
<button class="right">右抽屉菜单</button>
<button class="down">下抽屉菜单</button>
<button class="up">上抽屉菜单</button>
</div>
<div class="bgDiv"></div>
<div class="leftNav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
</div>
<div class="rightNav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
</div>
<div class="downNav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
</div>
<div class="upNav">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
</div>
<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.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
