巧用CSS3：target 偽類(lèi)制作Dropdown下拉菜單（無(wú)JS）

littleGrow 發(fā)布于2019-08-01 14:47 / 2198人閱讀

摘要：先上效果圖正如標(biāo)題所說(shuō)，本文是教你如何巧用偽類(lèi)制作下拉菜單，原生，無(wú)。實(shí)際例子其實(shí)就是主題的右上角那個(gè)按鈕，你點(diǎn)一下就會(huì)有一個(gè)下拉菜單出現(xiàn)，在其他區(qū)域點(diǎn)擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉(zhuǎn)換原點(diǎn)。

原文鏈接：http://devework.com/css3-target-dropdown.html

:target 是CSS3 中新增的一個(gè)偽類(lèi)，用以匹配當(dāng)前頁(yè)面的URI中某個(gè)標(biāo)志符的目標(biāo)元素（比如說(shuō)當(dāng)前頁(yè)面URL下添加#comment就會(huì)定位到id=“comment”的位置，俗稱(chēng)錨）。CSS3 為這個(gè)動(dòng)作賦予了更加多的功能——就如同:hover 一樣你可以做一些樣式定義。

先上效果圖

正如標(biāo)題所說(shuō)，本文是教你如何巧用CSS3:target偽類(lèi)制作Dropdown下拉菜單，原生HTML+CSS，無(wú)JavaScript。為了吸引各位往下看，先上實(shí)際例子，再進(jìn)行剖析。

Duang~ 實(shí)際例子其實(shí)就是DeveMobile 主題的右上角那個(gè)按鈕，你點(diǎn)一下就會(huì)有一個(gè)Dropdown下拉菜單出現(xiàn)，在其他區(qū)域點(diǎn)擊返回原狀。請(qǐng)用手機(jī)掃碼查看：

或者直接看這個(gè)gif 圖片：

實(shí)例剖析

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

大體上上面的HTML代碼可以分為兩部分，一部分是一個(gè)出發(fā)下拉動(dòng)作的入口（我習(xí)慣稱(chēng)為“開(kāi)關(guān)”）——通常是一個(gè)button（實(shí)例是將a標(biāo)簽替換為一個(gè)button的功能）；一部分就是觸發(fā)動(dòng)作的下拉菜單顯示了。

可能你會(huì)問(wèn)close 這個(gè)類(lèi)修飾的a標(biāo)簽?zāi)嵌问亲鍪裁吹模慨?dāng)你觸發(fā)下拉菜單后，有時(shí)候需要做關(guān)閉（返回原狀）的動(dòng)作，而從具體情況（比如說(shuō)如本實(shí)例觸發(fā)菜單后菜單將原來(lái)的開(kāi)關(guān)都掩蓋了）或者用戶(hù)體驗(yàn)上考慮，最好是除菜單區(qū)域外的整個(gè)屏幕都隨便盲點(diǎn)就能關(guān)閉菜單。這個(gè)a標(biāo)簽就是實(shí)現(xiàn)在打開(kāi)開(kāi)關(guān)后產(chǎn)生一個(gè)透明的遮罩層覆蓋到屏幕上。

有了上面的思路，那么再具體化為下面的代碼（忽略個(gè)別無(wú)關(guān)緊要的樣式，SASS代碼）：

 #dropdown-box {
.dropdown {
    opacity: 0;
    @include transform(scale(0, 0));
    @include transition(all 0.3s ease);
    overflow: hidden;
    z-index: 100;
    transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    }
}
.close {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: transparent;
}
&:target .dropdown {
    @include transform(scale(1, 1));
    opacity: 1;
    z-index: 9999;
}
&:target .close {
    display: block;
}
}

稍微解釋下上面的SASS代碼：默認(rèn)的情況下是隱藏下拉菜單（采用透明屬性opacity 與CSS3的transform的scale 縮小至0，遮罩層則默認(rèn)隱藏）；當(dāng)開(kāi)關(guān)觸發(fā)后透明度變?yōu)?b>1且放到至正常的一倍，同時(shí)遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉(zhuǎn)換原點(diǎn)。

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