溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何利用純css做一個下拉菜單功能

發(fā)布時間：2021-03-17 12:55:59 來源：億速云 閱讀：156 作者：清風(fēng) 欄目：web開發(fā)

這篇“如何利用純css做一個下拉菜單功能”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“如何利用純css做一個下拉菜單功能”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

直接上效果圖。

1，一個按鈕，沒點(diǎn)擊前（手機(jī)端）或者鼠標(biāo)沒指向時（pc端）

如何利用純css做一個下拉菜單功能

2，點(diǎn)擊后，或者鼠標(biāo)指向后。

如何利用純css做一個下拉菜單功能
如何利用純css做一個下拉菜單功能

就能夠顯示下拉菜單，而且它的實(shí)現(xiàn)原理也很簡單，只需要記住一點(diǎn):hover，這個屬性就行了。

我們直接上代碼，稍后再來解釋

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        li{
            list-style: none;
            height: 28px;
        }
        #menu{
            display: inline-block;
        }
        #menu #list {
            max-height: 0;
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:hover #list {
            max-height: 200px;
            transition: max-height 0.25s ease-in;
            width: 80px;
            margin: 0;
            padding: 0;
        }
        .button{
	          height: 32px;
	          width: 80px;
	          margin-top: 6px;
	          border-radius: 4px;
	          color: #fff;
	          padding-left: 0;
	          padding-right: 0;
	          line-height: 32px;
	          background: #E33E33;
	          text-align: center;
        }
    </style>
</head>
<body>
  <div id="menu">
    <div class="button">更多信息</div>
    <ul id="list">
        <li>個人中心</li>
        <li>我的博客</li>
        <li>設(shè)置</li>
        <li>退出登陸</li>
        <li>注銷</li>
    </ul>
  </div>
</body>
</html>

只需要設(shè)置一個div，然后給他設(shè)置兩種狀態(tài)，一種是沒有:hover，一種是有:hover。并且在沒有:hover的時候設(shè)置菜單隱藏就可以了（overflow: hidden;），其余的代碼都是簡單的盒子模型。

現(xiàn)在再來說一說:hover，這個東西是什么，它是一個css選擇器，選擇器用于選擇鼠標(biāo)指針浮動在上面的元素。 所以說當(dāng)鼠標(biāo)懸浮或者手機(jī)端點(diǎn)擊的時候，就會觸發(fā)這個屬性，就能夠讓這個下拉菜單顯示出來了。同時我們加上了transition屬性，讓下拉菜單有漸變的效果，更加感覺時下拉下來的。

所以說css選擇器是不是很神奇，用的好的話，就不用寫一大坨js代碼。我將會在后續(xù)把css選擇器做成一個專欄，到時候在系統(tǒng)的介紹所有的css選擇器。

感謝你的閱讀，希望你對“如何利用純css做一個下拉菜單功能”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手