CSS3制作Dropdown下拉菜单的方法
我要评论: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>
大体上上面的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;
- rightright: 0;
- bottombottom: 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！
相关文章
- 这篇文章主要介绍了纯html+css制作三级下拉菜单，如何制作下拉菜单效果，三级下拉菜单又是怎么实现的，本文为大家揭晓，感兴趣的小伙伴们可以参考一下2016-03-10
- 基于html5代码实现折叠菜单附源码下载，效果逼真，非常方便使用，对html5折叠菜单感兴趣的朋友可以参考下2015-11-27
jQuery+HTML5实现的带链接箭头的多级下拉菜单导航特效源码
是一段实现了拥有链接箭头及鼠标悬浮展开效果的多级下拉导航菜单代码，此段代码的实例中实现了四级菜单导航，有需要的朋友们也可以自己添加或删除一级或几级菜单导航，本段2014-12-24
HTML5+CSS3实现的超级可爱的鬼脸表情下拉菜单效果源码
这款HTML5/CSS3鬼脸表情下拉菜单真的很特别，虽然菜单的实现并没有利用复杂的HTML5/CSS3技术，但是创意的确不错2014-11-19
HTML5/CSS3自定义浮动Select 超炫下拉菜单动画源码
今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单，这个CSS3菜单利用CSS3特性可以浮动在网页上，并带有阴影效果，同时，展开下拉框时会以旋转形式弹出一个二级菜单2014-11-08- 可输入下拉菜单，不可思议是不是， 本例通过一些方法实现这个不可能的事情，感兴趣的朋友可以参考下2014-09-06
- 这篇文章主要介绍了html下拉菜单提交后如何保留选中值而不返回默认值，方法虽简单，但比较实用，需要的朋友可以参考下2014-09-06
jquery实现强大功能的下拉菜单(可以放任意html内容)
下拉菜单项可以是任意形式的，比如你可以在下拉菜单里放上登陆框，图文内容，表格等等2013-05-06- 这篇文章主要介绍了CSS中下拉菜单和表单以及弹出层的简单笔记,是一些CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-16
是一段实现了鼠标放在导航时，该导航会下拉出相应内容的二级菜单的效果代码，本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用2015-03-12
最新评论