如何操作 - 可點選下拉選單
瞭解如何使用 CSS 和 JavaScript 建立可點選的下拉選單。
下拉選單
下拉選單是一個可切換的選單，允許使用者從預定義列表中選擇一個值
自己動手試一試 »建立可點選的下拉選單
建立一個下拉選單，當用戶點選按鈕時顯示。
步驟 1) 新增 HTML
示例
<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>
示例解釋
使用任何元素來開啟下拉選單，例如 <button>、<a> 或 <p> 元素。
使用容器元素（如 <div>）建立下拉選單，並在其中新增下拉鍊接。
將 <div> 元素包裝在按鈕和 <div> 周圍，以便使用 CSS 正確放置下拉選單。
步驟 2) 新增 CSS
示例
/* 下拉選單按鈕 */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 滑鼠懸停和聚焦下拉按鈕時 */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 容器 <div> - 用於定位下拉選單內容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉選單內容 (預設隱藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd;}
/* 顯示下拉選單（當用戶點選下拉按鈕時，使用 JS 為 .dropdown-content 容器新增此類） */
.show {display:block;}
示例解釋
我們已經為下拉按鈕設定了背景顏色、內邊距、懸停效果等。
.dropdown 類使用 position:relative，這在我們需要將下拉選單內容放置在下拉選單按鈕正下方（使用 position:absolute）時是必需的。
.dropdown-content 類包含實際的下拉選單。預設情況下它是隱藏的，並在懸停時顯示（見下文）。請注意，min-width 設定為 160px。您可以隨時更改此設定。提示： 如果您希望下拉選單的寬度與下拉按鈕一樣寬，請將 width 設定為 100%（並將 overflow:auto 設定為在小螢幕上啟用滾動）。
我們沒有使用邊框，而是使用了 box-shadow 屬性，使下拉選單看起來像一個“卡片”。我們還使用 z-index 將下拉選單置於其他元素的前面。
步驟 3) 新增 JavaScript
示例
/* 當用戶點選按鈕時，*/
/* 在隱藏和顯示下拉內容之間切換 */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// 如果使用者在下拉選單外點選，則關閉下拉選單
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
自己動手試一試 »
右對齊下拉選單
導航欄中的下拉選單
搜尋（篩選）下拉選單
提示：請訪問我們的 CSS 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示： 請參閱我們的 可懸停下拉選單，瞭解更多關於可懸停下拉選單的資訊。
