[Rails]Bootstrapでヘッダーを整える

今回は、Bootstrapを使ってヘッダーにハンバーガーメニューの導入を行っていきます。

ヘッダーを指定した画面幅に応じて、コンテンツを表示したり、三本線の画像（ハンバーガーメニュー）を表示したりを切り替えていきます。

開発環境

ruby 2.6.3
Rails 5.2.6
Bootstrap 4.5

前提

前提として、Bootstrapの導入が行われている状態で説明していきます。

いきなり完成形

まずは、こんなことをして〜、の前にいきなり完成形のコードをのせておきます。

header

    <header class="sticky-top">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark text-white">
        <a>
          <%= link_to 'Top', root_path, data: {"turbolinks" => false} %>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <% if user_signed_in? %>
              <li class="nav-item">
                <%= link_to '投稿フォーム', new_post_path %>
              </li>
              <li class="nav-item">
                <%= link_to '投稿一覧', posts_path %>
              </li>
              <li class="nav-item">
                <%= link_to 'ランキング', ranks_rank_path %>
              </li>
              <li class="nav-item">
                <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
              </li>
            <% else %>
              <li class="nav-item">
                <%= link_to "新規登録", new_user_registration_path %>
              </li>
              <li class="nav-item">
                <%= link_to "ログイン", new_user_session_path %>
              </li>
            <% end %>
          </ul>
        </div>
      </nav>
    </header>

これだけで、あとはよろしく〜では、雑すぎるので、解説していきます。

ヘッダーを固定

header

    <header class="sticky-top">
:

まず、ヘッダーを画面上部に固定します。
classにsticky-topをつけるだけで、上部に固定できます。（Bootstrap優秀〜）

ブレークポイントの指定

header

 <!--ブレークポイントの指定-->
 <nav class="navbar navbar-expand-md">
:

わかりにくいので、背景色、色の指定等の記述は削除しています。

navbar-expand-mdで、mdでナビゲーションバーとハンバーガーメニューの切り替えを行います。

ハンバーガーメニュー部分

ハンバーガーメニューアイコンの設置と開いたり閉じたりの処理を行っています。

header

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
:

#navbarNavDropdownを対象に開閉を行っていきます。

「navbar-toggler」classが付与される要素にdata-toggle="collapse"、data-target="#[id名]"、aria-controls="[id名]"、aria-expanded="false"、aria-label="Toggle navigation"

まとめ

ハンバーガーメニューの実装がかんたんに実装できました。

Bootstrap日本語リファレンスにも説明がありますので、ぜひ調べてみてください。