教你玩轉CSS 下拉菜單

時間 2021-02-21

標籤 html spa code htm blog pdo 博客欄目 CSS 简体版

原文原文鏈接

使用 CSS 建立一個鼠標移動上去後顯示下拉菜單的效果。

1.基本下拉菜單

當鼠標移動到指定元素上時，會出現下拉菜單。html

代碼演示：

<!DOCTYPE html>
<html lang="en">

<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">
    <title>水香木魚的博客</title>

    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>

    <div class="dropdown">
        <span>Mouse over me</span>
        <div class="dropdown-content">
            <p>Hello World!</p>
        </div>
    </div>
</body>

</html>

效果演示：

實例解析

HTML 部分：ui

咱們能夠使用任何的 HTML 元素來打開下拉菜單，如：<span>, 或 a <button> 元素。spa

使用容器元素 (如： <div>) 來建立下拉菜單的內容，並放在任何你想放的位置上。code

使用 <div> 元素來包裹這些元素，並使用 CSS 來設置下拉內容的樣式。htm

CSS 部分：blog

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

.dropdown-content 類中是實際的下拉菜單。默認是隱藏的，在鼠標移動到指定元素後會顯示。注意 min-width 的值設置爲 160px。你能夠隨意修改它。注意: 若是你想設置下拉內容與下拉按鈕的寬度一致，可設置 width 爲 100% ( overflow:auto 設置能夠在小尺寸屏幕上滾動)。博客

咱們使用 box-shadow 屬性讓下拉菜單看起來像一個」卡片」。it

:hover 選擇器用於在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。io

2.下拉菜單

代碼演示：

<!DOCTYPE html>
<html lang="en">

<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">
    <title>水香木魚的博客</title>

    <style>
        /* 下拉按鈕樣式 */

        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 須要定位下拉內容 */

        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉內容 (默認隱藏) */

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜單的連接 */

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠標移上去後修改下拉菜單連接顏色 */

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠標移上去後顯示下拉菜單 */

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 當下拉內容顯示後修改下拉按鈕的背景顏色 */

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>

    <div class="dropdown">
        <button class="dropbtn">下拉菜單</button>
        <div class="dropdown-content">
            <a href="#">水香木魚的博客 1</a>
            <a href="#">水香木魚的博客 2</a>
            <a href="#">水香木魚的博客 3</a>
        </div>
    </div>
</body>

</html>

效果演示：

3.下拉內容對齊方式

float:left;

float:right;

若是你想設置右浮動的下拉菜單內容方向是從右到左，而不是從左到右，能夠添加如下代碼 right: 0;

    .dropdown-content {
        right: 0;
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。