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 3D制作实战案例分析
Sep 18 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS filter 有什么神奇用途
May 25 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
escape unescape的php下的实现方法
2007/04/27 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
php 字符串替换的方法
2012/01/10 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python 递归函数详解及实例
2016/12/27 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
销售主管的自我评价分享
2014/01/03 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
找工作求职信
2014/07/07 职场文书
化学教育专业求职信
2014/07/08 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
学习计划是什么
2019/04/30 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python