ハンバーガーメニューとイケてるボタンを両立させる方法

10028 ワード
Bootstrap Rails bootstrap4 Rails テキストリンク

目標

以下のような仕様のヘッダーを作成する

仕様
1. ビューポートサイズが中以下の時、ハンバーガーメニューを表示する。
2. ビューポートサイズが大以上の時、ハンバーガーメニューを削除し、リンクボタンを表示する。

ビューポートサイズの定義については、Bootstrap4移行ガイドを参考にしています。

https://cccabinet.jpn.org/bootstrap4/utilities/display

完成イメージ

図1 ビューポートサイズが中以下の時の画面

図2 図1から図1中のハンバーガーメニュー(①)を押下した際の画面

図3 ビューポートサイズが大以上の時の画面

実装したコード

基本的には、Bootstrap4移行ガイドのサンプルコードを流用しています。

https://cccabinet.jpn.org/bootstrap4/components/navbar

app/views/layouts/_header.html.erb
<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <%= link_to "Sample", root_path, :class => "navbar-brand" %>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
　　　　<ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <%= link_to "新規登録",   new_user_registration_path, :class => "d-none d-lg-block btn btn-primary rounded-pill" %>
            <%= link_to "新規登録",   new_user_registration_path, :class => "d-block d-lg-none nav-link" %>
          </li>
          <li class="nav-item">
            <%= link_to "ログイン", new_user_session_path, :class => "d-none d-lg-block btn btn-outline-primary rounded-pill" %>
            <%= link_to "ログイン", new_user_session_path, :class => "d-block d-lg-none nav-link" %>
          </li>
      </ul>
    </div>
  </nav>
</header>

実装したコードの解説

重要な部分だけかいつまんで解説します。

navbar-expand-lg

app/views/layouts/_header.html.erb
<%# 2行目 %>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  • レスポンシブ可能な折り畳みのタイミングを制御する
  • 今回はビューポートサイズが大以上でハンバーガーメニューを消去したいのでnavbar-expand-lgを指定している

参考

https://cccabinet.jpn.org/bootstrap4/components/navbar

ml-auto

app/views/layouts/_header.html.erb
<%# 8行目 %>
<ul class="navbar-nav ml-auto">
  • ボタンを右側に寄せるために使用
  • ml-autoの意味は左側のマージンをautoに設定する

何故、ml-autoで要素が右側によるのか?

　通常、marginに対してautoを指定した場合、数値は0になる。しかし、widthを指定した状態で、marginのどちらかだけにautoをしてすると、指定した方に数値を算出する仕様だから。

参考

https://kojika17.com/2012/08/margin-of-css.html
https://cccabinet.jpn.org/bootstrap4/utilities/spacing

d-none d-lg-block

app/views/layouts/_header.html.erb
<%# 9,12行目 %>
<li class="nav-item">
    <%= (省略), :class => "d-none d-lg-block btn btn-primary rounded-pill" %>   
</li>
  • 任意のビューポートサイズでの要素の表示・非表示を制御する

参考

https://cccabinet.jpn.org/bootstrap4/utilities/display

btn btn-primary rounded-pill

  • 長丸ボタンを作成するために使用

参考

https://cccabinet.jpn.org/bootstrap4/components/buttons

d-block d-lg-none

app/views/layouts/_header.html.erb
<%# 10,13行目 %>
<li class="nav-item">
    <%= (省略), :class => "d-block d-lg-none nav-link" %>
</li>
  • 任意のビューポートサイズでの要素の表示・非表示を制御する

参考

https://cccabinet.jpn.org/bootstrap4/utilities/display