CSS - 下拉選單

上一頁
下一頁

下拉選單是一種使用者介面元素，包含選項列表。它允許使用者透過將滑鼠懸停或點選觸發元素來從列表中選擇一個值。它通常用於導航選單、表單以及網站的其他互動式元件。

下拉選單是使用 HTML 的無序列表（<ul>）和列表項（<li>）元素建立的。

本章將介紹如何使用 CSS 對下拉選單元素進行樣式設定和排列，控制其外觀和行為。

CSS 下拉選單 - 基本示例

讓我們來看一個帶有選項列表的下拉選單的簡單示例。當您將滑鼠懸停在“選擇一個選項”文字上時，會出現一個帶有選項的下拉選單。

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 0;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <span class="dropdown-button">Select an Option</span>
        <div class="dropdown-menu">
            <p>Option 1</p>
            <p>Option 2</p>
            <p>Option 3</p>
        </div>
    </div>
</body>
</html>

在上面的示例中

  • 使用任何 HTML 元素，例如 <span> 或 <button> 來開啟下拉內容。

  • 要建立下拉內容或選單，請使用容器元素（如 >div<）。

  • 使用 CSS 來包裝和定位下拉內容。

  • .dropdown 類使用 position:relative。此屬性將下拉選單放置在下拉按鈕正下方（使用 position:absolute）。

  • .dropdown-menu 類包含實際的下拉內容。預設情況下它是隱藏的，並在懸停時顯示。

  • CSS box-shadow 屬性使下拉選單看起來像一張 卡片。

  • :hover 選擇器在使用者將滑鼠移到下拉按鈕上時顯示下拉選單。

CSS 下拉選單 - 懸停效果

懸停下拉選單是一種使用者介面元素，當用戶將游標懸停在觸發元素上時，會顯示下拉選單。當用戶將游標移出觸發元素時，下拉選單通常會消失。

讓我們來看一個示例。此示例在下拉框內使用錨標記，並對其進行樣式設定以適應帶樣式的下拉按鈕。

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉選單 - 點選式下拉選單

當您點選下拉選單時，它會展開以顯示可用選項，您可以透過點選其中一個選項來選擇它。

讓我們來看一個示例

<html>
<head>
<style>
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;

    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
    .show {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const button = document.querySelector('.dropdown-button');
            const dropdownContent = document.querySelector('.dropdown-menu');

            button.addEventListener('click', function () {
                dropdownContent.classList.toggle('show');
            });

            window.addEventListener('click', function (event) {
                if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
                    dropdownContent.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>

CSS 下拉選單 - 右對齊選單

您可以透過對包含下拉選單的 <div> 應用 float: right 樣式來將下拉選單放置在螢幕右側。此排列將選單移到螢幕的右側。

讓我們來看一個示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: right;">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉選單 - 左對齊選單

您可以透過將 float: left 樣式新增到包含下拉選單的 <div> 來實現左對齊的下拉選單。此排列將選單移到螢幕的最左側。

讓我們來看一個示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: left;">
        <button class="dropdown-button">Select an Option</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉選單 - 帶圖片

您可以透過在文字選項旁邊包含圖片來增強下拉選單。當您將滑鼠懸停在圖片上時，會出現一個更大尺寸的圖片以及描述。

讓我們來看一個示例

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-img-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;

    }
    .dropdown:hover .dropdown-img-menu {
        display: block;
    }
    .img-descripition {
        padding: 15px;
        background-color: rgb(38, 222, 53);
        text-align: center;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <img src="images/red-flower.jpg" alt="Cinque Terre" width="200" height="100">
        <div class="dropdown-img-menu">
            <div class="img-descripition">Red color flower</div>
            <img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150">
        </div>
    </div>
</body>
</html>

CSS 下拉選單 - 帶導航欄

下拉導航欄通常出現在網站導航選單中。它由一個包含連結列表的水平欄組成。當用戶將滑鼠懸停或點選特定連結時，會出現一個下拉選單，顯示與所選連結相關的其他導航選項或內容。

讓我們來看一個示例

<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #208926;
    }
    li {
        float: left;
    }
    li a,
    .dropdown-option {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover,
    .dropdown:hover .dropdown-option {
        background-color: #f39a1d;
    }

    li.dropdown {
        display: inline-block;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #44e2d5;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 120px;
    }
    .dropdown-menu a {
        color: black;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .dropdown-menu a:hover {
        background-color: #ee3131;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Tutorialspoints</a></li>
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-option">Articles</a>
            <div class="dropdown-menu">
                <a href="#">HTML</a>
                <a href="#">CSS</a>
                <a href="#">Bootstrap</a>
            </div>
        </li>
    </ul>
</body>
</html>
列印頁面
上一頁
下一頁
廣告