<del id="s6uci"></del><del id="s6uci"></del>

<fieldset id="s6uci"></fieldset>

<strike id="s6uci"></strike>

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

littleGrow 發布于2019-08-01 14:47 / 2190人閱讀

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

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

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

先上效果圖

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

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

或者直接看這個gif 圖片：

實例剖析

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

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

可能你會問close 這個類修飾的a標簽那段是做什么的？當你觸發下拉菜單后，有時候需要做關閉（返回原狀）的動作，而從具體情況（比如說如本實例觸發菜單后菜單將原來的開關都掩蓋了）或者用戶體驗上考慮，最好是除菜單區域外的整個屏幕都隨便盲點就能關閉菜單。這個a標簽就是實現在打開開關后產生一個透明的遮罩層覆蓋到屏幕上。

有了上面的思路，那么再具體化為下面的代碼（忽略個別無關緊要的樣式，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代碼：默認的情況下是隱藏下拉菜單（采用透明屬性opacity 與CSS3的transform的scale 縮小至0，遮罩層則默認隱藏）；當開關觸發后透明度變為1且放到至正常的一倍，同時遮罩層顯示。為了讓下拉菜單更顯“下拉”的情況，采用CSS3的origin定位下轉換原點。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49590.html

css--下拉菜單

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

stormzhang 2019-08-02 10:56 評論0 收藏0
css--下拉菜單

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

HmyBmny 2019-08-30 15:54 評論0 收藏0
semantic-ui的下拉菜單效果在網頁中的實現以及初始化

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

twohappy 2019-08-23 17:02 評論0 收藏0
FCC 成都社區·前端周刊第 11 期

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

lentrue 2019-08-22 17:01 評論0 收藏0
FCC 成都社區·前端周刊第 11 期

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

NusterCache 2019-08-29 15:17 評論0 收藏0