Rails スマホ用の画面下部にあるメニューバーの実装【Instagramにあるようなやつ】【初心者向け】

環境

Rails5

実装イメージ

InstagramやTwitterをスマホで使う際にあるメニューバーを実装します。
↓こんな感じのやつです。

実装時、参考記事が見つかりませんでしたので、
初心者オリジナルになりますが、投稿します。
ベターな方法があればご指摘頂けますと幸いですm(__)m

実装

この記事ではBootstrapとCSS両方使っています（CSSだけでも出来ます）。
下記3点で実装します。

• メニューバーの作成
• メニューバーを画面下に固定
• レスポンシブでスマホサイズの時だけ表示

メニューバーの作成

ここに関してはヘッダーのメニューバーとほぼ同じで問題ないと思います。
ごちゃごちゃしておりますが…僕はこんな感じにしてみました。
※リンク判定範囲が広く、タップした際に一瞬ホバーするようにBootstrapを指定しています。

_mobile_nav.html.erb

    <ul class="w-100 shadow-lg list-unstyled list-group list-group-horizontal text-center">
      <button class="mx-auto list-group-item list-group-item-action">
        <%= link_to ○○_path do %>
         <p>アイコン、画像など</p>
        <% end %>
      </button>
      <button class="mx-auto list-group-item list-group-item-action">
        <%= link_to ○○_path do %>
        <p>アイコン、画像など</p>
        <% end %>
      </button>
      <button class="mx-auto list-group-item list-group-item-action">
        <%= link_to ○○_path do %>
        <p>アイコン、画像など</p>
        <% end %>
      </button>
      <button class="mx-auto list-group-item list-group-item-action">
        <%= link_to ○○_path do %>
        <p>アイコン、画像など</p>
        <% end %>
      </button>
    </ul>

メニューバーを画面下に固定

Bootstrapで .fixed-bottom を指定すれば画面下固定が可能です。

_mobile_nav.html.erb

#fixed-bottomを追加
    <ul class="fixed-bottom w-100 shadow-lg list-unstyled list-group list-group-horizontal text-center">

レスポンシブでスマホサイズの時だけ表示

最後ですが、CSSで指定しました。

application.scss

//width544p以下の時に適用される
@media screen and (min-width:544px) {
  .bottom-nav {
    display:none;
  }

スマホサイズの時だけ表示 というより、スマホサイズ以外の場合は消えるという記述にしています。
つまり、『デフォルトでは表示されて、スマホサイズ以外では消える』という設定です。

理由としては、display:none;を使って、表示させる際にdisplay:block;を使うと、
インライン要素であるべき部分も変更されてしまい、レイアウトが崩れてしまうためです。

_mobile_nav.html.erb

#bottom-navを追加
    <ul class="bottom-nav fixed-bottom w-100 shadow-lg list-unstyled list-group list-group-horizontal text-center">

これで完成です！
よく考えると、特にRailsの内容ではないですね…(^^;)