巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target
是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment
就会定位到id=“comment”
的位置,俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover
一样你可以做一些样式定义。
先上效果图
正如标题所说,本文是教你如何巧用CSS3 :target
伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript。为了吸引各位往下看,先上实际例子,再进行剖析。
Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区域点击返回原状。请用手机扫码查看:
或者直接查看这个效果gif 图:
实例剖析
从解释原理的角度我们将HTML 拉出来最小化代码如下:
1 |
<a href="#dropdown-box" class="dropdown-switcher"></a> |
大体上上面的HTML代码可以分为两部分,一部分是一个出发下拉动作的入口(我习惯称为“开关”)——通常是一个button(实例是将a标签替换为一个button的功能);一部分就是触发动作的下拉菜单显示了。
可能你会问close 这个类修饰的a
标签那段是做什么的?当你触发下拉菜单后,有时候需要做关闭(返回原状)的动作,而从具体情况(比如说如本实例触发菜单后菜单将原来的开关都掩盖了)或者用户体验上考虑,最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。这个a标签就是实现在打开开关后产生一个透明的遮罩层覆盖到屏幕上。
有了上面的思路,那么再具体化为下面的代码(忽略个别无关紧要的样式,SASS代码):
1 |
#dropdown-box { |
稍微解释下上面的SASS代码:默认的情况下是隐藏下拉菜单(采用透明属性opacity
与CSS3的transform
的scale
缩小至0,遮罩层则默认隐藏);当开关触发后透明度变为1且放到至正常的一倍,同时遮罩层显示。为了让下拉菜单更显“下拉”的情况,采用CSS3的origin
定位下转换原点。
注意下兼容性,所有主流浏览器均支持 :target
,除了 IE8 及更早的版本,移动端的话直接用。稍微理解下你就可以运用到自己的项目中了,have fun!
巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)的更多相关文章
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- CSS3 :target伪类的理解与使用
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...
- CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...
- Excel应用----制作二级下拉菜单【转】
应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...
- dropdown下拉菜单
<!--声明方式的下拉菜单:三个要点--> <!--1 外围容器用dropdown包裹--> <!--2 内部点击事件data-toggle--> <!--3 ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
随机推荐
- html5 canvas 奇怪的形状垂直渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [整理]html5 WebApp 01
在正式进入WebApp开发之前,有几个问题要解决: 1.我是产品策划:UI风格,功能设计,产品预期效果(如访问量等各类指标) 2.我是UI设计:图片图标制作,我该按怎样的大小来设计? 3.我是前端开发 ...
- ZYNQ. Interrupt(1)Private Timer
Interrupt zynq的中断. The PS is based on ARM architecture, utilizing two Cortex-A9 processors(CPUs) and ...
- E1. Array and Segments (Easy version)(暴力) && E2. Array and Segments (Hard version)(线段树维护)
题目链接: E1:http://codeforces.com/contest/1108/problem/E1 E2:http://codeforces.com/contest/1108/problem ...
- mybatis一对多关联查询——(九)
1.需求: 查询所有订单信息及订单下的订单明细信息. 订单信息与订单明细为一对多关系. 2. sql语句 确定主查询表:订单表 确定关联查询表:订单明细表 在一对一查询基础上添加订单明细表关 ...
- 用python socket模块实现简单的文件下载
server端: # ftp server端 import socket, os, time server = socket.socket() server.bind(("localhost ...
- perl6: Proc::Async (new)
# command with arguments my $proc = Proc::Async.new('whoami'); # subscribe to new output from out an ...
- 洛谷P3383线性筛素数
传送门 代码中体现在那个 $ break $ $ prime $ 数组 中的素数是递增的,当 $ i $ 能整除 $ prime[j ] $ ,那么 $ iprime[j+1] $ 这个合数肯定被 $ ...
- 2018-2019-2 网络对抗技术 20165301 Exp5 MSF基础应用
2018-2019-2 网络对抗技术 20165301 Exp5 MSF基础应用 实践原理 1.MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2.MSF的六个模块 查看 ...
- select 详解
In summary, a socket will be identified in a particular set when select returns if: readfds:If liste ...