写了一个手机端的下拉菜单，类似美团，用相对单位rem写的。

效果截图：

代码很简单，原理有点类似嵌套的选项卡，其中的难点在于弹出下拉菜单后，出现黑色半透明遮罩层，而且下层列表页面禁止滚动了。关键就是给html和body都加上overflow":"hidden。

效果预览：（请用谷歌浏览器的f12手机模拟模式）

http://www.gbtags.com/gb/rtreplayerpreview-standalone/2824.htm

源码下载：

http://pan.baidu.com/s/1qYR8IWs

【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery的更多相关文章

  1. [RN] React Native 仿美团下拉筛选菜单控件

    React Native 仿美团下拉筛选菜单控件 演示效果如下: 使用方法如下: 1.安装 npm install react-native-dropdownmenus --save react-na ...

  2. Android自定义控件之仿美团下拉刷新

    美团的下拉刷新分为三个状态: 第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动态改变其大小. 第二个部分为放开刷新状态(release to r ...

  3. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  7. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  8. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

随机推荐

  1. idea插件之——在markdown复制粘贴图片

    Markdown paste image 每次在idea的markdown中要粘贴图片的时候,要么复制链接,要么需要将软件手动上传到七牛云,本人根据了holgerbrandl/pasteimages这 ...

  2. 如何设置Cookie 的值为中文的内容

    默认情况下,cookie的值是不允许中文内容的.可以借助于java.net.URLEncoder先对中文字符串进行编码,将编码后的结果设为cookie值.当程序要读取cookie值时,先读取,然后使用 ...

  3. 201521123040 《Java程序设计》第6周学习总结

    1.本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 clone方法1.1 Object对象中的c ...

  4. 201521123100 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1.接口不是类,不能使用new进行实例化 2.使用instanceof运算符,可 ...

  5. 201521123016《java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) 2.1 将在网上商城购物或 ...

  6. eclipse ide for java ee developers与eclipse ide for java developers有什么区别

    前者集成了WTP,可用于j2ee开发,功能更完善

  7. java第十二次作业

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  8. 201521123103 《java学习笔记》 第十周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 二.书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  9. 学号：201521123116 《java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  10. Shiro第五篇【授权过滤、注解、JSP标签方式、与ehcache整合】

    授权过滤器测试 我们的授权过滤器使用的是permissionsAuthorizationFilter来进行拦截.我们可以在application-shiro中配置filter规则 <!--商品查 ...