這篇文章主要講解了“CSS3怎么制作Dropdown下拉菜單”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS3怎么制作Dropdown下拉菜單”吧！
員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過(guò)團(tuán)隊(duì)的力量開(kāi)發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、電商網(wǎng)站開(kāi)發(fā)，小程序設(shè)計(jì)，軟件按需網(wǎng)站開(kāi)發(fā)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
先上效果圖
正如標(biāo)題所說(shuō)，本文是教你如何巧用CSS3:target偽類制作Dropdown下拉菜單，原生HTML+CSS，無(wú)JavaScript。為了吸引各位往下看，先上實(shí)際例子，再進(jìn)行剖析。
Duang~ 實(shí)際例子其實(shí)就是DeveMobile 主題的右上角那個(gè)按鈕，你點(diǎn)一下就會(huì)有一個(gè)Dropdown下拉菜單出現(xiàn)，在其他區(qū)域點(diǎn)擊返回原狀。
直接看這個(gè)gif 圖片：
實(shí)例剖析
從解釋原理的角度我們將HTML 拉出來(lái)最小化代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
大體上上面的HTML代碼可以分為兩部分，一部分是一個(gè)出發(fā)下拉動(dòng)作的入口（我習(xí)慣稱為“開(kāi)關(guān)”）——通常是一個(gè)button（實(shí)例是將a標(biāo)簽替換為一個(gè)button的功能）；一部分就是觸發(fā)動(dòng)作的下拉菜單顯示了。
可能你會(huì)問(wèn)close 這個(gè)類修飾的a標(biāo)簽?zāi)嵌问亲鍪裁吹?？?dāng)你觸發(fā)下拉菜單后，有時(shí)候需要做關(guān)閉（返回原狀）的動(dòng)作，而從具體情況（比如說(shuō)如本實(shí)例觸發(fā)菜單后菜單將原來(lái)的開(kāi)關(guān)都掩蓋了）或者用戶體驗(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代碼）：
CSS Code復(fù)制內(nèi)容到剪貼板
#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;
rightright: 0;
bottombottom: 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)?且放到至正常的一倍，同時(shí)遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉(zhuǎn)換原點(diǎn)。
注意下兼容性，所有主流瀏覽器均支持 :target，除了 IE8 及更早的版本，移動(dòng)端的話直接用。稍微理解下你就可以運(yùn)用到自己的項(xiàng)目中了，have fun！
感謝各位的閱讀，以上就是“CSS3怎么制作Dropdown下拉菜單”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS3怎么制作Dropdown下拉菜單這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
