Bootstrap5 を使ってサイトバーメニューを作る

# HTML# Javascript# Bootstrap5# CSS

公開日：1/17/2022

今回はBootstrap5 を使ってほとんどCSS書かずにサイドバーを作ってみようと思います。

完成品👇 sidbar-toggler

解説動画

考え方

  1. CSSのflex boxを使う
  2. toggleボタンが押されたら、全ページを囲んでいる親要素にmargin-leftをマイナスでかけるもしくはゼロにする

要素のレイアウト

    <!-- 全ページを囲む要素 -->
    <main>

        <!-- サイトバーメニュー -->
        <div></div>

        <!-- 全ページの右のコンテンツ -->
        <div>

            <!-- トップのバー -->
            <div></div>

            <!-- したのコンテンツ -->
            <div></div>

        </div>
        <!-- 全ページの右のコンテンツ -->

    </main>
    <!-- 全ページを囲む要素 -->

今回はBootstrap5のCDN使います。

index.html


<!DOCTYPE html>
<html lang="ja" class="h-100">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>SideBar menu</title>
</head>

<body class="h-100 bg-light">

    <script src="main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>

</html>

いつも通り、bodyとhtmlタグにh-100を追加します。

全ページ囲親要素

<!-- 全ページを囲む要素 -->
    <main class="h-100">
        <div class="page-wrapper d-flex flex-row h-100 w-100">
           <!-- サイトバーメニュー -->
           <!-- 全ページの右のコンテンツ -->
        </div>
    </main>
<!-- 全ページを囲む要素 -->

サイトバーメニュー

<!-- 全ページを囲む要素 -->
    <main class="h-100">
        <div class="page-wrapper d-flex flex-row h-100 w-100">

          <!-- サイトバーメニュー -->
          <nav class="sidebar bg-primary bg-gradient">
                <div class="brand p-4">
                    <h4>
                        Sidabar Sample
                    </h4>
                </div>
                <ul class="nav flex-column m-o p-3">
                    <li class="nav-item mb-2">
                        <a href="" class="nav-link">Static</a>
                    </li>
                    <li class="nav-item mb-2">
                        <a href="" class="nav-link w-100 h-100">Dropdown</a>
                    </li>
                </ul>
            </nav>
           <!-- サイトバーメニュー -->

           <!-- 全ページの右のコンテンツ -->
        </div>
    </main>
<!-- 全ページを囲む要素 -->

ここでサイドバーメニューの幅を固定にしちゃいます。

style.css


/* 重要な部分 */
.sidebar{
    max-width: 250px;
    min-width: 250px;
}

全ページの右のコンテンツ


<!-- 全ページの右のコンテンツ -->
<div class="page-content">

  <!-- トップバー -->
  <nav class="navbar px-3 bg-light border-bottom shadow-sm">
      <div class="navbar-brand toggle-menu">

          <!--  js用にidを付けておく  -->
          <button class="btn btn-light btn-sm" id="sidebarToggler">
              <i class="fas fa-bars fa-lg"></i>
          </button>

      </div>
      <ul class="navbar-nav d-flex flex-row">
          <li class="nav-item ml-3 text-muted">
              Home
          </li>
          <li class="nav-item ml-3 text-muted">
              Test
          </li>
          <li class="nav-item ml-3 text-muted">
              Login
          </li>
      </ul>
  </nav>
  <!-- トップバー -->

  <!-- 下のコンテンツ -->
  <div class="content p-3">
      <div class="page-title border-bottom pb-2 ">
          <h2>Main page</h2>
      </div>
      <div class="container-fuild pt-3">
          <div class="card">
              <div class="card-header">
                  ただのテスト
              </div>
              <div class="card-body">
                  <div class="card-text">
                      <p>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, beatae accusantium. Dolor corporis accusamus omnis consectetur! Eum recusandae ducimus adipisci in laudantium deleniti enim! Hic corrupti modi sint odit impedit eligendi facilis earum iusto, laudantium magni ad maxime soluta quaerat id ab! Ullam nihil quos, ipsum minus harum nemo ratione asperiores at, repellendus et dicta quaerat vel autem nobis neque quibusdam maxime debitis reprehenderit ipsam quia aut dolore similique. Est, veniam eaque illo voluptatibus repellendus velit facere, iure tempora dolorum dolorem rem facilis distinctio incidunt quia doloribus illum quas voluptate, laborum repellat? Nisi, dignissimos rem unde quidem ratione deleniti consequuntur?
                      </p>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- 下のコンテンツ -->

</div>
<!-- 全ページの右のコンテンツ -->

次はちょっとした見栄えのスタイル加えます

style.css


/* 見栄え */
.sidebar .brand{
    background-color: #0d6efdc9;
    color: white;
}
.sidebar .nav-link{
    background-color: rgba(255, 255, 255, 0.493);
    color: white;
}

そうしたら、このようななるはずです👇

layout

JSでtoggleさせる

toggleボタンが押されたら、左に入ったり出てきたりするように処理を買いていく。


// ページが読み込まれた後に実行
window.onload = () => {
    // toggleボタンをセレクト
    let sidebarToggler = document.getElementById('sidebarToggler')
    // 全ページを囲む親要素をセレクト
    let page = document.getElementsByTagName('main')[0];
    // 表示状態用の変数
    let showSidebar = true;

    // イベント追加
    sidebarToggler.addEventListener('click', () => {

        // 表示状態判別
        if(showSidebar){

            page.style.cssText = 'margin-left: -250px'
            showSidebar = false;

        }else{

            page.style.cssText = 'margin-left: 0px'
            showSidebar = true;

        }
    })
}

処理の流れとしては、toggleボタンをセレクトし、クリックイベントを追加して、クリックが押されたら全ページを囲む親のmargin-leftが変化するといった感じです。 最後にmarginが滑らかなに変化するようににcss transitionを追加しておきます。

style.css


/* アニメーション */
main{
    transition: 0.3s all ease;
}

完成コード

index.html


<!DOCTYPE html>
<html lang="ja" class="h-100">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>SideBar menu</title>
</head>

<body class="h-100 bg-light">
<!-- 全ページを囲む要素 -->
    <main class="h-100">
        <div class="page-wrapper d-flex flex-row h-100 w-100">

          <!-- サイトバーメニュー -->
            <nav class="sidebar bg-primary bg-gradient">
                <div class="brand p-4">
                    <h4>
                        Sidabar Sample
                    </h4>
                </div>
                <ul class="nav flex-column m-o p-3">
                    <li class="nav-item mb-2">
                        <a href="" class="nav-link">Static</a>
                    </li>
                    <li class="nav-item mb-2">
                        <a href="" class="nav-link w-100 h-100">Dropdown</a>
                    </li>
                </ul>
            </nav>
          <!-- サイトバーメニュー -->

          <!-- 全ページの右のコンテンツ -->
            <div class="page-content">

                <!-- トップバー -->
                <nav class="navbar px-3 bg-light border-bottom shadow-sm">
                    <div class="navbar-brand toggle-menu">
                        <button class="btn btn-light btn-sm" id="sidebarToggler">
                            <i class="fas fa-bars fa-lg"></i>
                        </button>
                    </div>
                    <ul class="navbar-nav d-flex flex-row">
                        <li class="nav-item ml-3 text-muted">
                            Home
                        </li>
                        <li class="nav-item ml-3 text-muted">
                            Test
                        </li>
                        <li class="nav-item ml-3 text-muted">
                            Login
                        </li>
                    </ul>
                </nav>
                <!-- トップバー -->

                <!-- 下のコンテンツ -->
                <div class="content p-3">
                    <div class="page-title border-bottom pb-2 ">
                        <h2>Main page</h2>
                    </div>
                    <div class="container-fuild pt-3">
                        <div class="card">
                            <div class="card-header">
                                ただのテスト
                            </div>
                            <div class="card-body">
                                <div class="card-text">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, beatae accusantium. Dolor corporis accusamus omnis consectetur! Eum recusandae ducimus adipisci in laudantium deleniti enim! Hic corrupti modi sint odit impedit eligendi facilis earum iusto, laudantium magni ad maxime soluta quaerat id ab! Ullam nihil quos, ipsum minus harum nemo ratione asperiores at, repellendus et dicta quaerat vel autem nobis neque quibusdam maxime debitis reprehenderit ipsam quia aut dolore similique. Est, veniam eaque illo voluptatibus repellendus velit facere, iure tempora dolorum dolorem rem facilis distinctio incidunt quia doloribus illum quas voluptate, laborum repellat? Nisi, dignissimos rem unde quidem ratione deleniti consequuntur?
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 下のコンテンツ -->

            </div>
          <!-- 全ページの右のコンテンツ -->

        </div>
    </main>
<!-- 全ページを囲む要素 -->
    <script src="main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>

</html>

style.css


/* 重要な部分 */
.sidebar{
    max-width: 250px;
    min-width: 250px;
}

/* 見栄え */
.sidebar .brand{
    background-color: #0d6efdc9;
    color: white;
}
.sidebar .nav-link{
    background-color: rgba(255, 255, 255, 0.493);
    color: white;
}
/* アニメーション */
main{
    transition: 0.3s all ease;
}

main.js


// ページが読み込まれた後に実行
window.onload = () => {
    // toggleボタンをセレクト
    let sidebarToggler = document.getElementById('sidebarToggler')
    // 全ページを囲む親要素をセレクト
    let page = document.getElementsByTagName('main')[0];
    // 表示状態用の変数
    let showSidebar = true;

    // イベント追加
    sidebarToggler.addEventListener('click', () => {

        // 表示状態判別
        if(showSidebar){

            page.style.cssText = 'margin-left: -250px'
            showSidebar = false;

        }else{

            page.style.cssText = 'margin-left: 0px'
            showSidebar = true;

        }
    })
}

デモ -> bootstrap5-sidebar-menu.netlify.app

では、また！

・・・

案件依頼・お問い合わせ