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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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正则表达式使用的详细介绍
2013/04/27 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python判断字符串与大小写转换
2015/06/08 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
详解django2中关于时间处理策略
2019/03/06 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python判断变量是否为列表的方法
2020/09/17 Python
酒店值班经理的工作职责范本
2014/02/18 职场文书
大学新生入学感想
2015/08/07 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python