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美化表单控件全集
Jun 29 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
php过滤危险html代码
2008/08/18 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
文本框回车提交与禁止提交示例
2013/09/27 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
Django框架models使用group by详解
2020/03/11 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
2015年综治维稳工作总结
2015/04/07 职场文书
2016高考感言
2015/08/01 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android