CSS - 下拉選單：初學者指南

你好，未來的網頁設計師們！今天，我們將要進入CSS下拉選單的奇妙世界。作為你們親切友善的鄰居計算機老師，我非常興奮能夠帶領你們開展這次旅程。如果你從未寫過一行代碼，也不用擔心——我們將從最基本的開始，逐步學習。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

CSS - Dropdowns

什麼是CSS下拉選單？

在深入代碼之前，讓我們先了解一下下拉選單是什麼。想像你在一間豪華餐廳，服務生遞給你一張菜單。但這不是普通的菜單——這是一張魔法菜單！當你點擊“開胃菜”，一串美味的開胃小菜就會出現。這就是下拉選單在網站上的作用。它是一個菜單，當與之交互時，會顯示更多的選項。

現在，讓我們看看如何用CSS創造這種魔法！

CSS下拉選單 - 基本範例

我們從一個簡單的下拉菜單開始。這裡是HTML和CSS代碼：

<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>

.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);
z-index: 1;
}

.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;
}

讓我們分解一下：

我們為整個下拉菜單創建了一個容器（<div class="dropdown">）。
內部有一個按鈕（<button class="dropbtn">），將觸發下拉菜單。
實際的下拉內容在另一個div中（<div class="dropdown-content">）。
我們使用CSS隱藏下拉內容默認（display: none;）。
當我們將鼠標悬停在下拉容器上時，我們顯示內容（display: block;）。

CSS下拉選單 - 悬停效果

現在我們有了基本的下拉菜單，讓我們添加一個悬停效果來使其更精美：

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

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

這段CSS會在悬停時改變按鈕的顏色。就像按鈕在說：“嘿，我準備好了，要給你展示更多選項！”

CSS下拉選單 - 點擊下拉菜單

有時我們希望下拉菜單在點擊時出現，而不僅僅是悬停。這裡是如何使用一點JavaScript來實現：

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">下拉選單</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

這段腚本會在被點擊時切換 'show' 類別的開關，並在頁面上任意位置點擊時關閉下拉菜單。

CSS下拉選單 - 右對齊菜單

如果我們希望下拉菜單右對齊而不是左對齊呢？這很容易！

.dropdown-content {
right: 0;
}

只需在現有的CSS中添加這一行。就像告訴下拉菜單：“請向右移動一點！”

CSS下拉選單 - 左對齊菜單

為了完整性，這裡是如何顯式地將菜單左對齊（雖然這通常是默認的）：

.dropdown-content {
left: 0;
}

CSS下拉選單 - 带图片

讓我們通過添加一張图片來使下拉菜單更加精彩：

<div class="dropdown">
<button class="dropbtn">下拉選單</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

現在，你的下拉菜單頂部有一張美麗的图片。就像在你的CSS聖代上放上了一顆櫻桃！

CSS下拉選單 - 带導航欄

最後，讓我們看看如何將下拉菜單整合到導航欄中：

<ul class="navbar">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">下拉選單</a>
<div class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>
</li>
</ul>

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.navbar .dropdown {
display: inline-block;
}

這樣，你就擁有一個帶有下拉菜單的全功能導航欄。

結論

恭喜你！你剛剛學會了如何創建各種類型的CSS下拉菜單。記住，熟練來自練習，所以不要害怕對這些範例進行實驗。改變顏色，添加動畫，或者甚至嘗試在一個頁面上組合不同類型的下拉菜單。

這裡是一個我們所涵蓋方法的快速參考表：

方法	描述
基本下拉菜單	簡單的下拉菜單，在悬停時出現
悬停效果	悬停時改變顏色的下拉菜單
點擊下拉菜單	點擊時出現的下拉菜單
右對齊菜單	右對齊的下拉菜單
左對齊菜單	左對齊的下拉菜單（默認）
带图片	包含图片的下拉菜單
带導航欄	整合到導航欄的下拉菜單

記住，在網頁設計的世界裡，創意是你的最佳夥伴。所以，勇往直前，創造出令人驚艷的下拉菜單！誰知道呢，也許你會發明下一個網頁導航的大熱門。快樂編程！

Credits: Image by storyset