CSS3制作Dropdown下拉菜單的方法

2024-07-11 08:29:58

字體：大中小

來源：轉載

供稿：網友

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

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

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

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

實例剖析

從解釋原理的角度我們將HTML 拉出來最小化代碼如下：

CSS Code復制內容到剪貼板

<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代碼）：

CSS Code復制內容到剪貼板