如何創建：垂直菜單

如何創建垂直按鈕組

第一步 - 添加 HTML：

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

第二步 - 添加 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;
}

親自試一試

垂直滾動菜單

如果您想要垂直滾動菜單，請設置具體的高度并添加 overflow 屬性：

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

親自試一試

相關頁面

教程：如何創建側邊導航欄