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

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

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

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

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

1，一個按鈕，沒點擊前（手機端）或者鼠標沒指向時（pc端）

在這里插入圖片描述

2，點擊后，或者鼠標指向后。

手機點擊后
鼠標指向后

就能夠顯示下拉菜單，而且它的實現(xià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選擇器，選擇器用于選擇鼠標指針浮動在上面的元素。 所以說當鼠標懸浮或者手機端點擊的時候，就會觸發(fā)這個屬性，就能夠讓這個下拉菜單顯示出來了。同時我們加上了transition屬性，讓下拉菜單有漸變的效果，更加感覺時下拉下來的。

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

在這里插入圖片描述