首页
所有分类
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 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
css3弹性盒模型（Flexbox）详细介绍
Oct 08 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
JDBC(3) cypress(1) pdf(1) 弹窗(1) 太阳码(1) 变量提升(1) ant design(2) Eclipse(1) 延时任务(1) openGauss(1)
You might like
咖啡的化学
2021/03/03 咖啡文化
php&amp;java（一）
2006/10/09 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
2007/05/08 Javascript
js 学习笔记（三）
2009/12/29 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
html5唤起app的方法
2017/11/30 HTML / CSS
Artist Guitars新西兰：乐器在线商店
2017/09/17 全球购物
丝芙兰香港官网：Sephora香港
2018/03/13 全球购物
德国在线购买葡萄酒网站：Geile Weine
2019/09/24 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
安全生产活动月方案
2014/03/09 职场文书
职业生涯规划书怎么写？
2014/09/14 职场文书
英语辞职信范文
2015/02/28 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android