CSS3怎么制作Dropdown下拉菜單

這篇文章主要講解了“CSS3怎么制作Dropdown下拉菜單”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3怎么制作Dropdown下拉菜單”吧！

先上效果圖

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

Duang~ 實際例子其實就是DeveMobile 主題的右上角那個按鈕，你點一下就會有一個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代碼可以分為兩部分，一部分是一個出發下拉動作的入口（我習慣稱為“開關”）&mdash;&mdash;通常是一個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.     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且放到至正常的一倍，同時遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉換原點。

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

感謝各位的閱讀，以上就是“CSS3怎么制作Dropdown下拉菜單”的內容了，經過本文的學習后，相信大家對CSS3怎么制作Dropdown下拉菜單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！