CSS - 下拉選單

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

**設定尺寸：**在 CSS 中，可以使用 **padding**、**height** 和 **width** 屬性來調整網頁中下拉選單的大小。
**定義顏色和邊框：**建議使用與 UI 相容的顏色和邊框，並設定合適的厚度。可以使用 **background-color** 和 **border** 屬性在 CSS 中設定顏色和邊框。
**更改預設箭頭：** 設定屬性 “-webkit-appearance: none” 以刪除預設箭頭，並新增與網頁主題匹配的自定義箭頭圖示。
**懸停效果：** 互動式樣式，如懸停效果，可以在使用者將滑鼠懸停在下拉選單上時更改其樣式。這可能包括不透明度、顏色等的更改。
**響應式設計：** 使用 **媒體查詢** 調整不同螢幕尺寸下的下拉選單樣式。

本章將介紹如何利用 CSS 來設定下拉選單元素的樣式和佈局，控制其外觀和行為。

使用 CSS 設定下拉選單樣式

可以使用 HTML 中的 **<select>** 標籤定義下拉選單。當您點選下拉選單時，它會展開以顯示可用的選項，您可以透過點選其中一個選項來選擇它。

在下面的示例中，我們應用了以下樣式

首先，我們透過設定良好的字型樣式併為 body 定義背景顏色來設定 body 的樣式。我們使用 **CSS flexbox** 佈局系統來居中下拉選單元素。
然後，對於 select 元素，我們使用 **padding** 和 **width** 屬性定義尺寸。我們分別使用 **border**、**background-color** 和 **border-radius** 屬性設定邊框、顏色和邊框半徑。
我們使用 “-webkit-appearance: none” 屬性為 select 標籤刪除了預設的下拉選單圖示。我們使用 **偽元素** ::after 定義了自定義箭頭。然後使用其他一些屬性對齊其位置。
然後，我們為 select 元素添加了懸停效果和焦點效果。

示例

讓我們來看一個例子。

<html lang="en">

<head>
    <style>
        /* Basic styles for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            margin: 0;         
        }

        /* Container for the select element */
        .select-container {
            position: relative;
            width: 200px;
        }

        /* Styling the select element */
        .select-container select {
            width: 100%;
            padding: 10px;
            border: 2px solid #007bff;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333333;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }

        /* Adding a custom arrow */
        .select-container::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #007bff;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* Hover effect for the select element */
        .select-container select:hover {
            border-color: #0056b3;
        }
        
        /* Focus effect for the select element */
        .select-container select:focus {
            border-color: #0056b3;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="select-container">
        <select>
            <option value="option1"> Option 1 </option>
            <option value="option2"> Option 2 </option>
            <option value="option3"> Option 3 </option>
        </select>
    </div>
</body>

</html>

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

我們使用了 **:hover 偽類** 為 **<select>** 標籤建立懸停效果。

示例

讓我們來看一個例子。此示例在下拉框內使用錨點標籤，並設定其樣式以適合帶樣式的下拉按鈕。

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: 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">
        <button class="dropdown-button">Select an Option</button>

        <ul class="dropdown-menu">
            <li> <a>Option 1</a> </li>
            <li> <a>Option 2</a> </li>
            <li> <a>Option 3</a> </li>
        </ul>
    </div>
</body>

</html>

您可以透過將 **float: right** 樣式應用到包含下拉選單的容器來將下拉選單放置在螢幕右側。此安排將選單移到螢幕的右側。

示例

讓我們來看一個例子。

<DOCTYPE html>
 <html>
<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            float: right; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: 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">
        <button class="dropdown-button">
            Select an Option
        </button>

        <ul class="dropdown-menu">
            <li> <a> Option 1 </a> </li>
            <li> <a> Option 2 </a> </li>
            <li> <a> Option 3 </a> </li>
        </ul>
    </div>
</body>

</html>

您可以透過在文字選項旁邊包含影像來增強下拉選單。當您將滑鼠懸停在小圖片或選單按鈕上時，會顯示更大的圖片以及描述。

示例

讓我們來看一個例子。

<DOCTYPE html> 
<html>

<head>
    <style>
        body{
            height: 300px;
        }
        .dropdown {
            position: relative; 
            display: inline-block;
            height:200px;
        }
        .dropdown-img-menu {
            display: none; 
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .dropdown:hover .dropdown-img-menu {
            display: block;
        }
        .img-description {
            padding: 15px; 
            background-color: rgb(38, 222, 53);
            text-align: center;
        }
        p{
            border: 2px solid;
            padding: 10px;
            background: aqua;    
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <p>Flowers</p>
        <div class="dropdown-img-menu">
            <img src="/css/images/red-flower.jpg" alt="Red Flower" 
                width="150" height="100">
            <div class="img-descripition">
                Beautiful Red Flower
            </div>

            <img src="/css/images/orange-flower.jpg" alt="Red Flower" 
                    width="150" height="100">
            <div class="img-descripition">
                Beautiful Orange Flower
            </div>
        </div>
    </div>
</body>

</html>

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

現在我們將應用我們的下拉選單知識來使用 CSS 建立一個漂亮的導航欄。

示例

讓我們來看一個例子。

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            height:200px;
        }
        ul {
            list-style-type: none; 
            margin: 0; 
            padding: 0; 
            overflow: hidden;
            background-color: #40a944;
        }
        li {
            float: left;
        }
        li a, .dropdown-option {
            display: inline-block; 
            color: white; 
            text-align: center; 
            padding: 14px 16px;
            text-decoration: none; 
            z-index: 99;
        }
        li a:hover,.dropdown:hover .dropdown-option {
            background-color: #82ea32;
        }

        li.dropdown {
            display: inline-block;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            min-width: 160px; 
            background-color: #f9f9f9; z-index: 1;
        }
        .dropdown-menu a {
            color: black; 
            text-decoration: none; 
            display: block; 
            text-align: left;
        }
        .dropdown-menu a:hover {
            background-color: #82ea32;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>

<body>

    <h2>Dropdown Menu inside a Navigation Bar</h2>
    <ul>
        <li> <a>Tutorialspoints</a> </li>
        <li> <a>Home</a> </li>

        <li class="dropdown">
            <a class="dropdown-option"> Articles </a>
            <div class="dropdown-menu">
                <a>HTML</a>
                <a>CSS</a>
                <a>Bootstrap</a>
            </div>
        </li>
    </ul>

</body>

</html>

列印頁面

CSS - 下拉選單

目錄

如何在 CSS 中設定下拉選單樣式？

使用 CSS 設定下拉選單樣式

示例

CSS 下拉選單懸停效果

示例

CSS 右對齊下拉選單

示例

CSS 帶圖片的下拉選單

示例

CSS 下拉選單導航欄

示例