效果体验:
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. JS-underfined is not a function

  2. .NET平台开源项目速览(2)Compare .NET Objects对象比较组件

    .NET平台开源项目速览今天介绍一款小巧强大的对象比较组件.可以更详细的获取2个对象的差别,并记录具体差别,比较过程和要求可以灵活配置. .NET开源目录:[目录]本博客其他.NET开源项目文章目录 ...

  3. 两张图总结 Neutron 架构 - 每天5分钟玩转 OpenStack（74）

    前面我们详细讨论了 Neutron 架构,包括 Neutron Server,Core 和 Service Agent.现在用两张图做个总结.先看第一张: 与 OpenStack 其他服务一样,Neu ...

  4. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  5. C#：lock锁与订单号（或交易号）的生成

    在弄电商类网站的时候,往往是根据年月日时分秒的格式生成订单号(yyyyMMddHHmmss),为了解决并发性,就直接在生成订单号的区域块加上lock. 下面,我们来简单测试一下. 1.新建项目(控制台 ...

  6. ubuntu安装虚拟磁带库mhvtl

    项目需要用到磁带库,先装个虚拟磁带库mhvtl来模拟下. 1 下载源码 从网站https://sites.google.com/site/linuxvtl2/home#mhvtl-download下载 ...

  7. java之文件基本操作

    java之文件基本操作 1 使用 BufferedReader 在控制台读取字符 public static void readChar() throws IOException{ char c; I ...

  8. （十）WebGIS中地理坐标与屏幕坐标间的转换原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 地图本身是拥有坐标的,一般可以大致分为平面坐标和经纬度坐标, ...

  9. centos-5.5安装vmvare tools

    centos-5.5安装vmvare tools 虚拟机管理,安装tools 找到VMwareTools压缩包 解压到Desktop,桌面 终端进入桌面 执行程序# ./vmware-install. ...

  10. 代码的坏味道（4）——过长参数列(Long Parameter List)

    坏味道--过长参数列(Long Parameter List) 特征 一个函数有超过3.4个入参. 问题原因 过长参数列可能是将多个算法并到一个函数中时发生的.函数中的入参可以用来控制最终选用哪个算法 ...