利用純css做一個(gè)下拉菜單功能的示例代碼

發(fā)布時(shí)間：2020-09-01 16:14:17 作者：git小米粥

這篇文章主要介紹了利用純css做一個(gè)下拉菜單功能的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

導(dǎo)語：
這幾天看面試題目的時(shí)候，經(jīng)常能夠看到用css去實(shí)現(xiàn)一個(gè)下拉菜單，但是我發(fā)現(xiàn)很多人卻沒能夠做出來，最后只能勉強(qiáng)用js做出來。實(shí)話實(shí)說，我很震驚，這個(gè)功能實(shí)現(xiàn)起來很簡(jiǎn)單，甚至可以說是入門題目，怎么這么多人不會(huì)呢？所以今天來個(gè)面試干貨，帶大家直接手?jǐn)]css做下拉菜單。

還是一樣，話不多說，直接上效果圖。

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

在這里插入圖片描述

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

手機(jī)點(diǎn)擊后
鼠標(biāo)指向后

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

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

<!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>個(gè)人中心</li>
        <li>我的博客</li>
        <li>設(shè)置</li>
        <li>退出登陸</li>
        <li>注銷</li>
    </ul>
  </div>
</body>
</html>

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

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

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

在這里插入圖片描述