How TO - 拆分按鈕
瞭解如何使用 CSS 建立拆分按鈕下拉選單。
拆分按鈕下拉選單
將滑鼠懸停在箭頭圖示上以開啟下拉選單
如何建立拆分按鈕
步驟 1) 新增 HTML
建立當用戶將滑鼠移到一個圖示上時出現的下拉選單。
示例
<!-- Font Awesome 圖示庫 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn">按鈕</button>
<div class="dropdown">
<button class="btn" style="border-left:1px solid navy">
<i class="fa fa-caret-down"></i>
</button>
<div 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
示例
/* 下拉選單按鈕 */
.btn {
background-color: #2196F3;
color: white;
padding: 16px;
font-size: 16px;
border: none;
outline: none;
}
/* 容器 <div> - 用於定位下拉選單內容 */
.dropdown {
position: absolute;
display: inline-block;
}
/* 下拉選單內容 (預設隱藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 1;
}
/* 下拉選單中的連結 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 懸停時更改下拉菜單鏈接的顏色 */
.dropdown-content a:hover {background-color: #ddd}
/* 滑鼠懸停在下拉按鈕上時顯示下拉選單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 當下拉選單內容顯示時，更改下拉選單按鈕的背景顏色 */
.btn:hover, .dropdown:hover .btn {
background-color: #0b7dda;
}
自己動手試一試 »
提示：請訪問我們的 CSS 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示：請訪問我們的 可點選下拉選單，瞭解更多關於可點選下拉選單的資訊。
