どう作成するか：垂直メニュー

垂直ボタングループを作成する方法

第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;
}

実際に試してみる

垂直滚动メニュー

垂直滚动菜单を希望する場合、特定の高さを設定して以下を追加してください overflow 属性：

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

実際に試してみる

関連ページ

チュートリアル：サイドナビゲーションバーを作成する方法