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

CSS3制作Dropdown下拉菜單的方法

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

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

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

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

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

實(shí)例剖析

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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代碼可以分為兩部分，一部分是一個(gè)出發(fā)下拉動(dòng)作的入口（我習(xí)慣稱為“開關(guān)”）——通常是一個(gè)button（實(shí)例是將a標(biāo)簽替換為一個(gè)button的功能）；一部分就是觸發(fā)動(dòng)作的下拉菜單顯示了。

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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代碼：默認(rèn)的情況下是隱藏下拉菜單（采用透明屬性opacity 與CSS3的transform的scale 縮小至0，遮罩層則默認(rèn)隱藏）；當(dāng)開關(guān)觸發(fā)后透明度變?yōu)?且放到至正常的一倍，同時(shí)遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉(zhuǎn)換原點(diǎn)。

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

相關(guān)文章

最新評(píng)論