欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3制作Dropdown下拉菜單的方法

segmentfault   發(fā)布時間：2015-07-18 17:33:47   作者：Jeff2Ma   我要評論
這篇文章主要介紹了CSS3制作Dropdown下拉菜單的方法,文中使用target偽類,需要的朋友可以參考下

:target 是CSS3 中新增的一個偽類，用以匹配當前頁面的URI中某個標志符的目標元素（比如說當前頁面URL下添加#comment就會定位到id=“comment”的位置，俗稱錨）。CSS3 為這個動作賦予了更加多的功能——就如同:hover 一樣你可以做一些樣式定義。
先上效果圖

正如標題所說，本文是教你如何巧用CSS3:target偽類制作Dropdown下拉菜單，原生HTML+CSS，無JavaScript。為了吸引各位往下看，先上實際例子，再進行剖析。

Duang~ 實際例子其實就是DeveMobile 主題的右上角那個按鈕，你點一下就會有一個Dropdown下拉菜單出現，在其他區(qū)域點擊返回原狀。請用手機掃碼查看：
2015718172746643.png (280×280)

或者直接看這個gif 圖片：
2015718172920193.gif (208×247)

實例剖析

從解釋原理的角度我們將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代碼可以分為兩部分，一部分是一個出發(fā)下拉動作的入口（我習慣稱為“開關”）——通常是一個button（實例是將a標簽替換為一個button的功能）；一部分就是觸發(fā)動作的下拉菜單顯示了。

可能你會問close 這個類修飾的a標簽那段是做什么的？當你觸發(fā)下拉菜單后，有時候需要做關閉（返回原狀）的動作，而從具體情況（比如說如本實例觸發(fā)菜單后菜單將原來的開關都掩蓋了）或者用戶體驗上考慮，最好是除菜單區(qū)域外的整個屏幕都隨便盲點就能關閉菜單。這個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.     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，遮罩層則默認隱藏）；當開關觸發(fā)后透明度變?yōu)?且放到至正常的一倍，同時遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉換原點。

注意下兼容性，所有主流瀏覽器均支持 :target，除了 IE8 及更早的版本，移動端的話直接用。稍微理解下你就可以運用到自己的項目中了，have fun！

相關文章

最新評論