ナビゲーションバーの実装
ナビゲーションバーの実装
ナビゲーションバーとは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 [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
