操作方法 - 下拉式側邊欄
瞭解如何在側邊導航中新增下拉選單。
側邊導航中的下拉選單
建立下拉式側邊欄
步驟 1) 新增 HTML
示例
<div class="sidenav">
<a href="#about">關於</a>
<a href="#services">服務</a>
<a href="#clients">客戶</a>
<a href="#contact">聯絡</a>
<button class="dropdown-btn">下拉選單
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">連結 1</a>
<a href="#">連結 2</a>
<a href="#">連結 3</a>
</div>
<a href="#contact">搜尋</a>
</div>
示例解釋
使用任何元素來開啟下拉選單，例如 <button>、<a> 或 <p> 元素。
使用容器元素（如 <div>）建立下拉選單，並將下拉鍊接新增到其中。我們將對側邊導航中的所有連結使用相同的樣式。
步驟 2) 新增 CSS
示例
/* 固定側邊導航，全高 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* 樣式側邊導航連結和下拉按鈕 */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* 滑鼠懸停時 */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* 主內容 */
.main {
margin-left: 200px; /* 與側邊導航的寬度相同 */
font-size: 20px; /* 增加文字以啟用滾動 */
padding: 0px 10px;
}
/* 為活動的下拉按鈕新增一個 active 類 */
.active {
background-color: green;
color: white;
}
/* 下拉容器（預設隱藏）。可選：新增更淺的背景色和一些左填充以更改下拉內容的樣式 */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* 可選：樣式向下插入符號 */
.fa-caret-down {
float: right;
padding-right: 8px;
}
自己動手試一試 »
步驟 3) 新增 JavaScript
示例
//* 遍歷所有下拉按鈕以在隱藏和顯示其下拉內容之間切換 - 這允許使用者擁有多個下拉選單而不會發生衝突 */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
自己動手試一試 »
提示：請訪問我們的 CSS 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示：請訪問我們的 可點選下拉選單，瞭解更多關於可點選下拉選單的資訊。
提示：請訪問我們的 CSS 導航欄教程，瞭解更多關於導航欄的資訊。
提示：請訪問我們的 側邊導航教程，瞭解如何建立可關閉的側邊導航。
