html5手机端遮罩弹出菜单代码 - 计划_H5之家 - 中国HTML5教程资源分享第一站

效果体验:
http://hovertree.com/texiao/html5/17/
效果图：
代码如下：
 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <title>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起</title><base target="_blank" />
 8 
 9 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/reset.css"> <!-- CSS reset -->
10 
11 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/style.css"> <!-- Resource style -->
12 <!--[if IE]>
13 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
14 <![endif]-->
15 
16 </head>
17 <body>
18 
19 <div class="sucaihuo-container">
20 <section class="cd-section">
21 <a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">显示菜单</a>
22 </section>
23 <div><a href="http://hovertree.com/h/bjaf/menulayer.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>  <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>
24 </div>
25 <div class="cd-bouncy-nav-modal">
26 <nav>
27 <ul class="cd-bouncy-nav">
28 <li><a href="http://hovertree.com/">首页</a></li>
29 <li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
30 <li><a href="http://hovertree.com/menu/php/">PHP</a></li>
31 <li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li>
32 <li><a href="http://hovertree.com/texiao/easysector/">饼图</a></li>
33 <li><a href="http://tool.hovertree.com/">工具</a></li>
34 </ul>
35 </nav>
36 <a href="#0" class="cd-close" target="_self">关闭菜单</a>
37 </div>
38 </div>
39 <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>
40 <script src="http://hovertree.com/texiao/html5/17/main.js"></script> <!-- Resource jQuery -->
41 </body>
42 </html>