ナビゲーションメニューの色を随時変更する方法【bootstrap】

はじめに

ナビゲーションメニューについて

そもそもナビゲーションメニューって何？

ナビゲーションメニューとは、サイトやブログの上部やサイドなどに並んでいるリンクのことです。 ※bootstrapの公式サイト↓

たとえば上記の画像だと、自分は「ホーム」のページにいるので 「ホーム」のところが白くなっています。

こんな感じで、サイト上で自分が今いる項目の部分の色を変えるための方法を解説していきます！

完成品の画像

左のナビゲーションバーに注目！

※bootstrapが入っている前提

解説

上記の画像のように色をつけるためには、自分のいるリンクに 「'nav-link active'」というclassをつけることで実装できます。

つまり、「掲示板一覧」にいるときは、そこに対応するリンクのclassに対して「active」を付与し、「ユーザー一覧」にいるときは、そこに対応するリンクのclassに対して「active」を付与するというようにします。

※実装する前のコード

<!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <li class="nav-item">
          <%= link_to admin_boards_path, class:"nav-link" do %>
            <i class="nav-icon far fa-file"></i>
            <p>
              掲示板一覧
            </p>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to admin_users_path, class:"nav-link" do %>
            <i class="nav-icon far fa-user"></i>
            <p>
              ユーザー一覧
            </p>
          <% end %>
        </li>
      </ul>
    </nav>
    <!-- /.sidebar-menu -->

上記の「link_to」の部分のclassに、状況に応じて'active'というclassを付与するためのヘルバーメソッドを定義します。

def active_class(controller_name)
    controller_name == params[:controller]? 'active' : ''
end

※三項演算子なので下記とイコール

  def active_class(controller_name)
    return 'active' if controller_name == params[:controller]
  end
 

上記のように、引数としてコントローラの名前を渡し、 それがparamsに入っているcontrollerと一致していれば'active'を返すようにします。

「掲示板一覧」をクリックしたときは、'boards'コントローラのindexアクションが動き、 「ユーザー一覧」をクリックしたときは、'users'コントローラが動くので、 状況に応じて'active'を与えることができます。

先程のビューに、定義したメソッドを呼び出すための記述をします。

<!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <li class="nav-item">
          <%= link_to admin_boards_path, class:"nav-link #{active_class("boards")}" do %>
            <i class="nav-icon far fa-file"></i>
            <p>
              掲示板一覧
            </p>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to admin_users_path, class:"nav-link #{active_class("users")}" do %>
            <i class="nav-icon far fa-user"></i>
            <p>
              ユーザー一覧
            </p>
          <% end %>
        </li>
      </ul>
    </nav>
    <!-- /.sidebar-menu -->

引数には、対応するコントローラの名前を渡します。

これで完成！

※間違いなどあればコメントください！