2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ヘッダーメニューの表示を遷移ページごとで切り替える方法

Posted at

はじめに

ページごとにヘッダーメニューの内容を切り替えたい時の対処法です。
(例えばホーム画面ではAとBとCのメニューを表示させ、新規投稿画面ではDのメニューを表示させたい等)

完成イメージ

headerchange.gif

環境

MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0

作業していきましょう!

流れとしては、
①headerを「ホーム画面用ヘッダー」と「新規投稿画面用ヘッダー」に分けて部分テンプレートの作成を行います。
②リクエストパスによって条件分岐させ、表示内容を切り替える。
となります。

今回はログイン時にヘッダーに表示されるメニュー内容を変更します。

①「ホーム画面用ヘッダー」と「新規投稿画面用ヘッダー」の部分テンプレートを作成

①-1 まずはホーム画面用ヘッダーを作成します。views/layoutディレクトリ内に「_root_header.html.erb」を作成します。
_root_header.html.erb
<div class="headerMenus">
  <div class="headerMenus__left">
    <%= link_to image_tag("myTown4.jpg", class: "headerLogo"), "/" %>
    <% if user_signed_in? %>
      <div class="loginedMenus">
        <a href="#0", class="loginMenu">Top</a>
        <a href="#1", class="loginMenu">Category</a>
        <a href="#2", class="loginMenu">Prefecture</a>
        <a href="#3", class="loginMenu">New Posts</a>
      </div>
    <% else %>
      <div class="beforeLoginMenus">
        <%= link_to "ゲストログイン", users_guest_sign_in_path, method: :post, class: 'beforeLoginMenu' %>
        <%= link_to "ログイン", new_user_session_path, class: 'beforeLoginMenu' %>
        <%= link_to "新規登録", new_user_registration_path, class: 'beforeLoginMenu' %>
      </div>
    <% end %>
  </div>
  // 一部省略 //
</div>

と作成します。
ちなみに、ログイン時には「Top、Category、Prefecture、New Posts」という4つのメニューが表示されます。


##### ①-2 「新規投稿画面用ヘッダー」の部分テンプレートを作成します。views/layoutディレクトリ内に「_header.html.erb」を作成します。
_header.html.erb
<div class="headerMenus">
  <div class="headerMenus__left">
    <%= link_to image_tag("myTown4.jpg", class: "headerLogo"), "/" %>
    <% if user_signed_in? %>
      <div class="loginedMenus">
        <%= link_to "Top Page", root_path, class:"loginMenu" %>
      </div>
    <% else %>
      <div class="beforeLoginMenus">
        <%= link_to "ゲストログイン", users_guest_sign_in_path, method: :post, class: 'beforeLoginMenu' %>
        <%= link_to "ログイン", new_user_session_path, class: 'beforeLoginMenu' %>
        <%= link_to "新規登録", new_user_registration_path, class: 'beforeLoginMenu' %>
      </div>
    <% end %>
  </div>
  // 一部省略 //
</div>

こちらはログイン時に「Top Page」というメニューが表示されます。

※ヘッダー内の記述は各人でそれぞれ異なると思いますので、ご自身の記述内容に書き換えてください。

②リクエストパスによって条件分岐させ、表示内容を切り替える。

views/layouts内のapplication.html.erbにリクエストパス(ホーム画面へのパスorその他画面のパス)によって条件分岐させる記述をします。

application.html.erb
// 一部省略 //
<body>
  <header class="header">
    <%# トップページとその他のページでヘッダー表示を変更する %>
    <% if request.path == '/' %>
      <%= render partial: "layouts/root_header" %>
    <% else %>
      <%= render partial: "layouts/header" %>
    <% end %>
  </header>
  // 一部省略 //
</body>

<% if request.path == '/' %>と記述がありますが、これは「リクエストパスが' / '(ルート)である場合」という意味です。今回の場合、ルートパスをホーム画面に設定しています。

条件がtrue(ルートパスである)の場合は、
<%= render partial: "layouts/root_header" %>
で_root_header.html.erbを呼び出します。

false(ルートパス以外)の場合は
<%= render partial: "layouts/header" %>
でheader.html.erbを呼び出します。

以上で完了です。

最後に

他にもっと良い方法があるかとは思います。もしもっと良い方法があるという方がいらっしゃえばご教示いただけると幸いです。よろしくお願いします!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?