成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

巧用CSS3：target 偽類制作Dropdown下拉菜單（無JS）

littleGrow / 2217人閱讀

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

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

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

先上效果圖

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

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


或者直接看這個gif 圖片：

實例剖析

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

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

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

有了上面的思路，那么再具體化為下面的代碼（忽略個別無關(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)開關(guān)觸發(fā)后透明度變?yōu)?b>1且放到至正常的一倍，同時遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉(zhuǎn)換原點。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49590.html

相關(guān)文章

  • css--下拉菜單

    摘要：部分類使用這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕使用的右下角位置。類中是實際的下拉菜單。我們使用屬性讓下拉菜單看起來像一個卡片。選擇器用于在用戶將鼠標(biāo)移動到下拉按鈕上時顯示下拉菜單。 一、下拉菜單 1、示例 代碼如下 下拉菜單.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16p...

    stormzhang 評論0 收藏0

  • css--下拉菜單

    摘要：部分類使用這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕使用的右下角位置。類中是實際的下拉菜單。我們使用屬性讓下拉菜單看起來像一個卡片。選擇器用于在用戶將鼠標(biāo)移動到下拉按鈕上時顯示下拉菜單。 一、下拉菜單 1、示例 代碼如下 下拉菜單.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16p...

    HmyBmny 評論0 收藏0

  • semantic-ui的下拉菜單效果在網(wǎng)頁中的實現(xiàn)以及初始化

    摘要：是什么框架是一款很好用的工具，集成了很多很漂亮的模塊，能夠使網(wǎng)頁制作更加高效和美觀。今天使用的時候遇到一點問題記下來首先引入效果不對這時是需要初始化的文檔沒有只能靠猜加上初始化小坑填平遇錯來看 semantic是什么框架 semantic UI 是一款很好用的CSS工具，集成了很多很漂亮的UI模塊，能夠使網(wǎng)頁制作更加高效和美觀。今天使用的時候遇到一點問題記下來 首先引入 showImg...

    twohappy 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 11 期

    摘要：正式發(fā)布已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

    lentrue 評論0 收藏0

  • FCC 成都社區(qū)·前端周刊 第 11 期

    摘要：正式發(fā)布已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在中的運行速度問題。文章內(nèi)容包括什么是內(nèi)存，內(nèi)存生命周期，中的內(nèi)存分配，內(nèi)存釋放，垃圾收集，種常見的內(nèi)存泄漏以及如何處理內(nèi)存泄漏的技巧。 1. Angular 6 正式發(fā)布 Angular 6.0.0 已正式發(fā)布，新版本重點關(guān)注工具鏈以及工具鏈在 Angular 中的運行速度問題。Angular v6 是統(tǒng)一整體框架、Material ...

    NusterCache 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<