css--下拉菜單

     下拉菜單
    

        教程1
        教程2
        教程3
    

我們可以使用任何的 HTML 元素來(lái)打開(kāi)下拉菜單，如：, 或 a 元素。
使用容器元素 (如：

) 來(lái)創(chuàng)建下拉菜單的內(nèi)容，并放在任何你想放的位置上。
使用

元素來(lái)包裹這些元素，并使用 CSS 來(lái)設(shè)置下拉內(nèi)容的樣式。
CSS 部分：

dropdown 類使用 position:relative, 這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。

dropdown-content 類中是實(shí)際的下拉菜單。默認(rèn)是隱藏的，在鼠標(biāo)移動(dòng)到指定元素后會(huì)顯示。 注意 min-width 的值設(shè)置為 160px。你可以隨意修改它。 注意: 如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置 width 為 100% ( overflow:auto 設(shè)置可以在小尺寸屏幕上滾動(dòng))。

我們使用 box-shadow 屬性讓下拉菜單看起來(lái)像一個(gè)"卡片"。

hover 選擇器用于在用戶將鼠標(biāo)移動(dòng)到下拉按鈕上時(shí)顯示下拉菜單。

云服務(wù)器 GPU云服務(wù)器 下拉菜單 百度下拉菜單 多級(jí)下拉菜單 橫排下拉菜單

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

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

• 上一篇：webpack4.16壓縮打包
• 下一篇：2018年值得期待11個(gè)Javascript動(dòng)畫(huà)庫(kù)

相關(guān)文章

• css--下拉菜單

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

  HmyBmny 2019-08-30 15:54 評(píng)論0 收藏0

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

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

  littleGrow 2019-08-01 14:47 評(píng)論0 收藏0

• 純CSS實(shí)現(xiàn)下拉菜單導(dǎo)航

  摘要：需求當(dāng)鼠標(biāo)到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。設(shè)置是，默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在到按鈕區(qū)域時(shí)才會(huì)展開(kāi)下拉菜單以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專業(yè)《頁(yè)面制作》課程的作業(yè)題，當(dāng)時(shí)對(duì)題意理解錯(cuò)誤沒(méi)有實(shí)現(xiàn)題目要求，成了心中永遠(yuǎn)的痛，所謂念念不忘必有回響，在學(xué)校圖書(shū)館花了幾個(gè)小時(shí)做出來(lái)并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)，寫(xiě)了這篇博文...

  bingo 2019-08-29 10:54 評(píng)論0 收藏0

• 純CSS實(shí)現(xiàn)下拉菜單導(dǎo)航

  摘要：需求當(dāng)鼠標(biāo)到按鈕上時(shí)，出現(xiàn)下拉菜單導(dǎo)航條。設(shè)置是，默認(rèn)寬度為內(nèi)容寬度，則鼠標(biāo)只會(huì)在到按鈕區(qū)域時(shí)才會(huì)展開(kāi)下拉菜單以上是我的一些想法以及實(shí)現(xiàn)，如有錯(cuò)誤之處，歡迎各位前端大神留言評(píng)論拍磚。 前言：本題是網(wǎng)易云課堂的前端微專業(yè)《頁(yè)面制作》課程的作業(yè)題，當(dāng)時(shí)對(duì)題意理解錯(cuò)誤沒(méi)有實(shí)現(xiàn)題目要求，成了心中永遠(yuǎn)的痛，所謂念念不忘必有回響，在學(xué)校圖書(shū)館花了幾個(gè)小時(shí)做出來(lái)并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)，寫(xiě)了這篇博文...

  wapeyang 2019-08-01 15:20 評(píng)論0 收藏0

• HTML+CSS實(shí)現(xiàn)下拉菜單

  摘要：實(shí)現(xiàn)簡(jiǎn)單下拉菜單實(shí)現(xiàn)簡(jiǎn)單的下拉列表下拉列表實(shí)例代碼如下下拉列表下拉列表下拉列表下拉列表下拉列表下拉列表效果圖如下技術(shù)要點(diǎn)下拉菜單需邊的子菜單隱藏使用將元素隱藏鼠標(biāo)懸浮樣式父元素相對(duì)定位子元素絕對(duì)定位持續(xù)更新，多多關(guān)注 HTML+CSS實(shí)現(xiàn)簡(jiǎn)單下拉菜單 HTML+CSS實(shí)現(xiàn)簡(jiǎn)單的下拉列表 1.下拉列表實(shí)例 代碼如下： *{ margin:0; ...

  Blackjun 2019-08-02 10:56 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論