CSS3制做Dropdown往下拉菜单的方式

2021-01-20 07:25 jianzhan

:target 是CSS3 中新增的1个伪类，用以配对当今网页页面的URI中某个标示符的总体目标元素（例如说当今网页页面URL下加上#comment就会精准定位到id=“comment”的部位，俗称锚）。CSS3 为这个姿势授予了更为多的作用——就好似:hover 1样你能够做1些款式界定。
先上实际效果图

正如题目所说，本文是教你怎样巧用CSS3:target伪类制做Dropdown往下拉菜单，原生态HTML+CSS，无JavaScript。以便吸引住各位往下看，先上具体事例，再开展分析。

Duang~ 具体事例实际上便是DeveMobile 主题的右上角那个按钮，你点1下就会有1个Dropdown往下拉菜单出現，在别的地区点一下回到原状。请用手机上扫码查询：

或立即看这个gif 照片：

案例分析

从解释基本原理的角度大家将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编码能够分成两一部分，1一部分是1个考虑往下拉姿势的通道（我习惯性称为“电源开关”）——一般是1个button（案例是将a标识更换为1个button的作用）；1一部分便是开启姿势的往下拉菜单显示信息了。

将会你会问close 这个类装饰的a标识那段是做甚么的？当你开启往下拉菜单后，有时必须做关掉（回到原状）的姿势，而从实际状况（例如说如本案例开启菜单后菜单将原先的电源开关都遮盖了）或客户体验上考虑到，最好是是除菜单地区外的全部显示屏都随意盲点就可以关掉菜单。这个a标识便是完成在开启电源开关后造成1个全透明的遮罩层遮盖到显示屏上。

有了上面的思路，那末再实际化为下面的编码（忽视某些不相干紧要的款式，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.     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.     @include transform(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且放到至一切正常的1倍，另外遮罩层显示信息。以便让往下拉菜单更显“往下拉”的状况，选用CSS3的origin精准定位下变换原点。

留意下适配性，全部流行访问器均适用 :target，除 IE8 及更早的版本号，挪动端话立即用。略微了解下你便可以应用到自身的新项目中了，have fun！

为您推荐