写了一个手机端的下拉菜单，类似美团，用相对单位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. 软工+C(2017第3期) 超链接

    // 上一篇:分数和checklist // 下一篇:Alpha/Beta换人 注:平常看文章,总有能和构建之法,软件工程相关的链接,增量记录,也可以通过在其他人博客的交流中使用相关的超链接,在使用中 ...

  2. 201521123031《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...

  3. 在Python中数据类型转换的注意事项

    在学习Python的过程接触到了数据类型转化这一过程,在实践的过程中我发现了一个小问题,我们在平常的使用中要一定注意 在str型转换成int型的过程中,str内的内容必须是整数不然会报错 如图: 在转 ...

  4. JAVA课程设计——团队博客

    JAVA课程设计--团队博客 1. 团队名称.团队成员介绍(需要有照片) 团队名称:"小羊吃蓝莓"小游戏 团队成员介绍: 成员 班级 学号 廖怡洁 网络1513 201521123 ...

  5. java第十二次作业

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

  6. 201521123100 《java程序设计》第12周学习总结

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

  7. 201521123016《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执 ...

  8. springmvc学习笔记(常用注解)

    springmvc学习笔记(常用注解) 1. @Controller @Controller注解用于表示一个类的实例是页面控制器(后面都将称为控制器). 使用@Controller注解定义的控制器有如 ...

  9. Oracle总结第二篇【视图、索引、事务、用户权限、批量操作】

    前言 在Oracle总结的第一篇中,我们已经总结了一些常用的SQL相关的知识点了-那么本篇主要总结关于Oralce视图.序列.事务的一些内容- 在数据库中,我们可以把各种的SQL语句分为四大类- (1 ...

  10. Web开发模式【Mode I 和Mode II的介绍、应用案例】

    开发模式的介绍 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II) 首先我们来理清一些概念吧: DAO(Data Access Object):主要对数据的 ...