CSS3制作Dropdown下拉菜单的方法


Posted in HTML / CSS onJuly 18, 2015

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。
先上效果图

正如标题所说,本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript。为了吸引各位往下看,先上实际例子,再进行剖析。

Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区域点击返回原状。请用手机扫码查看:
CSS3制作Dropdown下拉菜单的方法

或者直接看这个gif 图片:
CSS3制作Dropdown下拉菜单的方法

实例剖析

从解释原理的角度我们将HTML 拉出来最小化代码如下:

CSS Code复制内容到剪贴板
  1. <a href="#dropdown-box" class="dropdown-switcher"></a>   
  2. <div id="dropdown-box">   
  3.     <a href="##" class="close"></a>   
  4.     <div class="dropdown">   
  5.     <ul>   
  6.         <li></li>   
  7.         <li></li>   
  8.     </ul>   
  9. </div>  

大体上上面的HTML代码可以分为两部分,一部分是一个出发下拉动作的入口(我习惯称为“开关”)——通常是一个button(实例是将a标签替换为一个button的功能);一部分就是触发动作的下拉菜单显示了。

可能你会问close 这个类修饰的a标签那段是做什么的?当你触发下拉菜单后,有时候需要做关闭(返回原状)的动作,而从具体情况(比如说如本实例触发菜单后菜单将原来的开关都掩盖了)或者用户体验上考虑,最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。这个a标签就是实现在打开开关后产生一个透明的遮罩层覆盖到屏幕上。

有了上面的思路,那么再具体化为下面的代码(忽略个别无关紧要的样式,SASS代码):

CSS Code复制内容到剪贴板
  1. #dropdown-box {   
  2. .dropdown {   
  3.     opacity: 0;   
  4.     @include transform(scale(0, 0));   
  5.     @include transition(all 0.3s ease);   
  6.     overflowhidden;   
  7.     z-index: 100;   
  8.     transform-origin: 100% 0;   
  9.     -webkit-transform-origin: 100% 0;   
  10.     -ms-transform-origin: 100% 0;   
  11.     -moz-transform-origin: 100% 0;   
  12.     }   
  13. }   
  14. .close {   
  15.     displaynone;   
  16.     positionfixed;   
  17.     top: 0;   
  18.     rightright: 0;   
  19.     bottombottom: 0;   
  20.     left: 0;   
  21.     z-index: 999;   
  22.     width: 100%;   
  23.     height: 100%;   
  24.     backgroundtransparent;   
  25. }   
  26. &:target .dropdown {   
  27.     @include transform(scale(1, 1));   
  28.     opacity: 1;   
  29.     z-index: 9999;   
  30. }   
  31. &:target .close {   
  32.     displayblock;   
  33. }   
  34. }  

稍微解释下上面的SASS代码:默认的情况下是隐藏下拉菜单(采用透明属性opacity 与CSS3的transform的scale 缩小至0,遮罩层则默认隐藏);当开关触发后透明度变为1且放到至正常的一倍,同时遮罩层显示。为了让下拉菜单更显“下拉”的情况,采用CSS3的origin定位下转换原点。

注意下兼容性,所有主流浏览器均支持 :target,除了 IE8 及更早的版本,移动端的话直接用。稍微理解下你就可以运用到自己的项目中了,have fun!

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 #HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 #HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
Web程序工作原理详解
2014/12/25 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP常用技巧汇总
2016/03/04 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
javascript基础知识
2016/06/07 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Vue实现简易计算器
2020/02/25 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Django中几种重定向方法
2015/04/28 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python自动识别文本编码格式代码
2019/12/26 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
详解KMP算法以及python如何实现
2020/09/18 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
什么是抽象
2015/12/13 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
期末自我鉴定
2014/02/02 职场文书
促销活动总结报告
2014/04/26 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
小学入学感言
2015/08/01 职场文书