首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5手机端弹出遮罩菜单特效代码

Posted in HTML / CSS onJanuary 27, 2016

效果图如下所示：

HTML5手机端弹出遮罩菜单特效代码

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

以上代码是小编给大家分享的HTML5手机端弹出遮罩菜单特效代码，希望对大家有所帮助。

HTML5手机端弹出遮罩菜单特效代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS中的字体大小设置属性总结
May 24 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 #HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 #HTML / CSS
原神(1) 模拟人生(1) LOL(1) 绿林侠盗(1) 遗弃(1) 吸血鬼(1) 死亡搁浅(1) 铁拳(1) 大话西游(1) 战锤40K(1)
You might like
PHP常用代码
2006/11/23 PHP
php单例模式实现方法分析
2015/03/14 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python+django实现文件上传
2016/01/17 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Pure Collection美国官网：来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
群众路线剖析材料（四风）
2014/11/05 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
信息技术课教学反思
2016/02/23 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android