写了一个手机端的下拉菜单，类似美团，用相对单位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#描述）：第三节、雷区绘制

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 绘制雷区 这一节我们主要涉及界面中雷区的绘制.绘制雷区需要三个变量来保存雷区行数.列数.以及地雷的数量.而且我们希望能够自动获取上次游 ...

  2. 201521123001《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  3. 201521123023《Java程序设计》第11周学习总结

    1. 本周学习总结 Lock.Condition,互斥同步访问方法,相比于synchronized,相似的wait().notify().notifyAll()方法,还有更多高级的方法 Executo ...

  4. java程序设计----学生基本信息管理系统

    1. 团队课程设计博客链接 http://www.cnblogs.com/hyy786030686/p/7063890.html 2. 个人负责模块或任务说明 --登录界面的设计 --用户名和密码验证 ...

  5. iScroll在谷歌浏览器中的问题

    通常情况下,我们会使用iScroll.js做移动端的下拉刷新和上拉加载功能,当然,还有很多其他功能. 不过,在使用iScroll的时候,在谷歌浏览器中出现不支持的情况,即,做移动的时候,出现卡顿或是每 ...

  6. 笔记1 linux 多线程 互斥锁

    //mutex lock #include<stdio.h> #include<unistd.h> #include<pthread.h> struct test ...

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

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

  8. SVN使用【介绍SVN、快速入门、解决冲突】

    什么是SVN SVN全称:Subversion,是一个开放源代码的版本控制系统 Svn是一种集中式文件版本管理系统.集中式代码管理的核心是服务器,所有开发者在开始新一天的工作之前必须从服务器获取代码, ...

  9. Apache Spark 2.2.0 中文文档 - Spark RDD（Resilient Distributed Datasets）论文 | ApacheCN

    Spark RDD(Resilient Distributed Datasets)论文 概要 1: 介绍 2: Resilient Distributed Datasets(RDDs) 2.1 RDD ...

  10. AFN默认请求和响应的处理

       1.默认的响应的解析      1.1 AFN默认不支持接受text/html数据类型,只需要增加即可     manager.responseSerializer.acceptableCont ...