CSS3制作Dropdown下拉菜单的方法

若要前行,就得离开你现在停留的地方。要有对自己纯粹而坚韧的标准,才可以跟着直觉和信念走去。自卑心最伤害自己,是最大的障碍。有时候阳光很好,有时候阳光很暗,这就是生活。

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚)。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。
先上效果图

正如标题所说,本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript。为了吸引各位往下看,先上实际例子,再进行剖析。

Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区域点击返回原状。请用手机扫码查看:

或者直接看这个gif 图片:

实例剖析

从解释原理的角度我们将HTML 拉出来最小化代码如下:

CSS Code复制内容到剪贴板
  1. <arel="nofollow noopener noreferrer" href="#dropdown-box"class="dropdown-switcher"></a>
  2. <divid="dropdown-box">
  3. <arel="nofollow noopener noreferrer" href="##"class="close"></a>
  4. <divclass="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. @includetransform(scale(0,0));
  5. @includetransition(all0.3sease);
  6. overflow:hidden;
  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. display:none;
  16. position:fixed;
  17. top:0;
  18. rightright:0;
  19. bottombottom:0;
  20. left:0;
  21. z-index:999;
  22. width:100%;
  23. height:100%;
  24. background:transparent;
  25. }
  26. &:target.dropdown{
  27. @includetransform(scale(1,1));
  28. opacity:1;
  29. z-index:9999;
  30. }
  31. &:target.close{
  32. display:block;
  33. }
  34. }

稍微解释下上面的SASS代码:默认的情况下是隐藏下拉菜单(采用透明属性opacity 与CSS3的transform的scale 缩小至0,遮罩层则默认隐藏);当开关触发后透明度变为1且放到至正常的一倍,同时遮罩层显示。为了让下拉菜单更显“下拉”的情况,采用CSS3的origin定位下转换原点。

注意下兼容性,所有主流浏览器均支持 :target,除了 IE8 及更早的版本,移动端的话直接用。稍微理解下你就可以运用到自己的项目中了,have fun!

以上就是CSS3制作Dropdown下拉菜单的方法。除了少许的天份之外,大多是靠努力得来的“三分天才,七分努力。”是成功不变的法则,一个不愿或不肯努力的人,比起原地踏步,还要糟糕,所以要好好把握一分一秒的时刻,作为迈向下一步的准备,如此才能扎实稳固。更多关于CSS3制作Dropdown下拉菜单的方法请关注haodaima.com其它相关文章!

标签: Dropdown