效果体验:
http://hovertree.com/texiao/html5/17/

效果图：

代码如下：

 <!doctype html>

 <html lang="zh">

 <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>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起</title><base target="_blank" />

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/reset.css"> <!-- CSS reset -->

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/style.css"> <!-- Resource style -->

 <!--[if IE]>

 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>

 <![endif]-->

 </head>

 <body>

 <div class="sucaihuo-container">

 <section class="cd-section">

 <a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">显示菜单</a>

 </section>

 <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>

 </div>

 <div class="cd-bouncy-nav-modal">

 <nav>

 <ul class="cd-bouncy-nav">

 <li><a href="http://hovertree.com/">首页</a></li>

 <li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>

 <li><a href="http://hovertree.com/menu/php/">PHP</a></li>

 <li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li>

 <li><a href="http://hovertree.com/texiao/easysector/">饼图</a></li>

 <li><a href="http://tool.hovertree.com/">工具</a></li>

 </ul>

 </nav>

 <a href="#0" class="cd-close" target="_self">关闭菜单</a>

 </div>

 </div>

 <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>

 <script src="http://hovertree.com/texiao/html5/17/main.js"></script> <!-- Resource jQuery -->

 </body>

 </html>

更多特效： http://www.cnblogs.com/jihua/p/webfront.html

html5手机端遮罩弹出菜单代码的更多相关文章

  1. js 监听手机端键盘弹出和收起事件

    //这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.html const ua = typeof window == ...

  2. js手机端图片弹出方法

    1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...

  3. JQuery弹出菜单时禁止页面（body）滚动

    最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...

  4. query简洁弹出层代码

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  5. pythonGUI菜单栏和弹出菜单

    菜单栏代码: from tkinter import * root = Tk() menubar = Menu(root) def callback(): pass filemenu = Menu(m ...

  6. HTML5微信长按图片不会弹出菜单的解决方法

    HTML5微信长按图片不会弹出菜单的解决方法 <pre><div ontouchstart = "return false;"></div>&l ...

  7. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  8. Swing-JPopupMenu弹出菜单用法-入门

    弹出菜单是GUI程序中非常常见的一种控件.它通常由鼠标右击事件触发,比如在windows系统桌面上右击时,会弹出一个包含“刷新”.“属性”等菜单的弹出菜单.Swing中的弹出菜单是JPopupMenu ...

  9. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

随机推荐

  1. iOS-常见问题

    11.21常见问题 一storyboard连线问题 产生原因:将与storyboard关联的属性删除了,但是storyboard中还保持之前所关联的属性. 解决: 点击view controller ...

  2. C#设计模式系列：模板方法模式（Template Method）

    你去银行取款的时候,银行会给你一张取款单,这张取款单就是一个模板,它把公共的内容提取到模板中,只留下部分让用户来填写.在软件系统中,将多个类的共有内容提取到一个模板中的思想便是模板方法模式的思想. 模 ...

  3. Gridview里添加合计行

    ShowFooter="true" ; ; ; protected void gvIncomeYG_RowDataBound(object sender, GridViewRowE ...

  4. codeforces Round #320 (Div. 2) C. A Problem about Polyline(数学) D. "Or" Game(暴力，数学)

    解题思路:就是求数 n 对应的二进制数中有多少个 1 #include <iostream> #include<cstdio> using namespace std; int ...

  5. Windows下使用Dev-C++开发基于pthread.h的多线程程序

    一.下载Windows版本的pthread 目前最新版本是:pthreads-w32-2-9-1-release.zip. 二.解压pthread到指定目录      我选择的目录是:E:\DEV-C ...

  6. poj 3630 Phone List

    #include<iostream> #include<cstdio> #include<cstring> #define N 100005 using names ...

  7. Ubuntu杂记——Ubuntu下安装VMware

    转战Ubuntu,不知道能坚持多久,但是自己还是要努力把转战过程中的学习到的给记录下来.这次就来记录一下,Ubuntu下如何安装VMware. 就我所知,Linux下有VirtualBox和VMwar ...

  8. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  9. input（file）按钮美化

    <!DOCTYPE HTML> <html> <body> <input type="file" id="upload" ...

  10. OWIN 中 K Commands 与 OwinHost.exe 相等吗？

    OwinHost.exe: While some will want to write a custom process to run Katana Web applications, many wo ...