ブートストラップメニューとサブメニューの作成方法

2024-02-10 01:01 ブートストラップメニューサブメニュー
  1. HTMLのセットアップ: まず、適切なHTML構造を作成します。以下は基本的な例です。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">メニュー</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          サブメニュー
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">サブメニュー1</a>
          <a class="dropdown-item" href="#">サブメニュー2</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

  1. CSSの適用: ブートストラップのデフォルトスタイルはある程度見栄えがしますが、必要に応じて独自のスタイルを適用することもできます。

  2. JavaScriptの読み込み: ブートストラップのドロップダウンメニューを動作させるためには、ブートストラップのJavaScriptファイルを読み込む必要があります。以下のコードをHTMLファイルの<head>セクション内に追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

これで、ブートストラップのメニューとサブメニューが正常に動作するはずです。

上記の例では、サブメニューをドロップダウンメニューとして作成しました。メニューアイテムには適切なリンクを追加し、必要に応じてスタイルやレイアウトを調整することができます。

この記事では、ブートストラップを使用してメニューとサブメニューを作成するための基本的な手順を説明しました。必要に応じて、より高度なカスタマイズや他のブートストラップコンポーネントの組み合わせも行うことができます。