ナビゲーションバーの実装

ナビゲーションバーの実装

ナビゲーションバーとはWebサイトの一番上にあるメニューのことです。Webサイトには必ずありますよね。別名グローバルナビゲーションとも呼ばれます。Webサイトの大項目が配置されているものだと思って良いです。

たとえばBootstrapのサイトのナビゲーションバーはこんな感じになっています。

Bootstrapサイトの項目が収められていますよね。特徴としてはどのページにいてもこのメニューは見えているということです。自分がどこにいるかわからくなった場合でもこのナビゲーションバーがあれば、大項目には戻ってくることができます。ユーザーを迷わせないという意味では重要なパーツですね。

今回はNewsableにこのナビゲーションバーを作成していきます。

Newsableナビゲーションバーの作成

Bootstrapのサイトではナビゲーションのコードも、あらかじめいくつか用意されています。Bootstrapの公式サイトにアクセスして、必要なコードをコピーすることができます。
https://getbootstrap.com/docs/4.1/components/navbar/

良いと思ったコードをコピーします。今回は以下のようなコードを見つけcopyリンクをクリックしてコードをコピーしてください。

見つけられない場合は以下のコードをコピーしてください。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

それをapplication.html.erbの<body>のすぐ下に追加します。

# application.html.erb

<body>
  <nav class="navbar navbar-expand-lg ...">
    <a class="navbar-brand" href="#">Navbar</a>
    ....

では、ブラウザで確認してみましょう。以下のように、ナビゲーションバーが作成されているはずです。

ナビゲーションバーをカスタマイズ

コピーしたナビゲーションバーをカスタマイズします。Newsableに必要なリンクに変更する作業になります。

ナビゲーションバーの背景書を変更する

背景色をやや暗い赤に変更します。ここはCSSファイルに書いても良いのですが、今回は直接ファイルの中に書き込みます。

#  style="background-color: #c22a1f"を書き込む
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #c22a1f">

すると以下のようになるはずです。

次にリンクを書き換えてみましょう。

バックグラウンドのカラーとブランドの変更や、リンクなどを変更して以下のようなナビゲーションにします。

コードは以下を参考にしてください。

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <% if user_signed_in? %>
      <li class="nav-item">
        <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%= link_to "編集", edit_user_registration_path, class: 'nav-link' %>
      </li>
    <% else %>
      <li class="nav-item">
        <%= link_to "ログイン", new_user_session_path, class: 'nav-link' %>
      </li>
    <% end %>

  </ul>
</div>

課題

ヘッダーにArticlesへのリンクをブログという名前で追加してみましょう。また、UserClipsリンクをマイクリップという名前で作成しましょう。 このリンクはログインしている時しか表示されません。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×