巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target
是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment
就会定位到id=“comment”
的位置,俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover
一样你可以做一些样式定义。
先上效果图
正如标题所说,本文是教你如何巧用CSS3 :target
伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript。为了吸引各位往下看,先上实际例子,再进行剖析。
Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区域点击返回原状。请用手机扫码查看:
或者直接查看这个效果gif 图:
实例剖析
从解释原理的角度我们将HTML 拉出来最小化代码如下:
<a href="#dropdown-box" class="dropdown-switcher"></a> <div id="dropdown-box"> <a href="##" class="close"></a> <div class="dropdown"> <ul> <li></li> <li></li> </ul> </div> </div> |
---|
大体上上面的HTML代码可以分为两部分,一部分是一个出发下拉动作的入口(我习惯称为“开关”)——通常是一个button(实例是将a标签替换为一个button的功能);一部分就是触发动作的下拉菜单显示了。
可能你会问close 这个类修饰的a
标签那段是做什么的?当你触发下拉菜单后,有时候需要做关闭(返回原状)的动作,而从具体情况(比如说如本实例触发菜单后菜单将原来的开关都掩盖了)或者用户体验上考虑,最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。这个a标签就是实现在打开开关后产生一个透明的遮罩层覆盖到屏幕上。
有了上面的思路,那么再具体化为下面的代码(忽略个别无关紧要的样式,SASS代码):
#dropdown-box { .dropdown { opacity: 0; @include transform(scale(0, 0)); @include transition(all 0.3s ease); overflow: hidden; z-index: 100; transform-origin: 100% 0; -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -moz-transform-origin: 100% 0; } } .close { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: transparent; } &:target .dropdown { @include transform(scale(1, 1)); opacity: 1; z-index: 9999; } &:target .close { display: block; } } |
---|
稍微解释下上面的SASS代码:默认的情况下是隐藏下拉菜单(采用透明属性opacity
与CSS3的transform
的scale
缩小至0,遮罩层则默认隐藏);当开关触发后透明度变为1且放到至正常的一倍,同时遮罩层显示。为了让下拉菜单更显“下拉”的情况,采用CSS3的origin
定位下转换原点。
注意下兼容性,所有主流浏览器均支持 :target
,除了 IE8 及更早的版本,移动端的话直接用。稍微理解下你就可以运用到自己的项目中了,have fun!
- 神经网络思想建立LR模型(DL公开课第二周答案)
- 如何用卷积神经网络从歌曲中提取纯人声?这里有教程+代码
- 排序算法对比、总结(Python代码)
- 记一道未能答出的算法面试题
- 关于numpy mean函数的axis参数
- 在Keras+TF环境中,用迁移学习和微调做专属图像识别系统
- Tensorflow的LRN是怎么做的
- 存储Tensorflow训练网络的参数
- 用Ansible部署ELK STACK
- 十六个有用的Linux命令行技巧
- keras系列︱深度学习五款常用的已训练模型
- 基于VGG19的识别中国人、韩国人、日本人分类器
- 机器学习算法GBDT的面试要点总结
- 了解、接受和利用Java中的Optional (类)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法