如何 - 垂直選單
瞭解如何使用 CSS 建立垂直選單。
垂直選單
如何建立垂直按鈕組
步驟 1) 新增 HTML
示例
<div class="vertical-menu">
<a href="#" class="active">主頁</a>
<a href="#">連結 1</a>
<a href="#">連結 2</a>
<a href="#">連結 3</a>
<a href="#">連結 4</a>
</div>
步驟 2) 新增 CSS
示例
.vertical-menu {
width: 200px; /* 如果需要，可以設定寬度 */
}
.vertical-menu a {
background-color: #eee; /* 灰色背景色 */
color: black; /* 黑色文字顏色 */
display: block; /* 使連結顯示在下方 */
padding: 12px; /* 新增一些內邊距 */
text-decoration: none; /* 刪除連結下劃線 */
}
.vertical-menu a:hover {
background-color: #ccc; /* 滑鼠懸停時為深灰色背景 */
}
.vertical-menu a.active {
background-color: #04AA6D; /* 為“活動/當前”連結新增綠色 */
color: white;
}
自己動手試一試 »
垂直滾動選單
設定一個特定的 height 並新增 overflow 屬性，如果你想要一個垂直滾動選單
提示：檢視我們的 How To - Side Navigation 教程，瞭解如何建立固定、全高度的側邊導航。
