html5手机端遮罩弹出菜单代码
程序员文章站
2022-05-06 09:30:19
...
效果体验:
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>下一篇： C#关键字out与ref的区别