初めてのLaravel 5.6 : (26) ナビゲーションメニュー

今回は、サイトのナビゲーションメニューを作成します。Laravel の機能というよりは、Bootstrap の機能がメインです。

Routing

最初にサイトのルートで、記事一覧を表示するよう、routes/web.php を修正します。

// routes/web.php

Route::get('about', 'PagesController@about')->name('about');
Route::get('contact', 'PagesController@contact')->name('contact');

// root を記事一覧にします
Route::get('/', 'ArticlesController@index')->name('home');

Route::resource('articles', 'ArticlesController');

View

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

resouces/views/navbar.blade.phpを作成します。
内容は Bootstrap の Navbar のサンプルをコピーして、修正したものです。
詳細は Bootstrapのサイトを参照してください。
https://getbootstrap.com/docs/4.1/components/navbar/

{{-- resouces/views/navbar.blade.php --}}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- ブランド表示 -->
    <a class="navbar-brand" href="{{ route('home') }}">My Blog</a>

    <!-- スマホやタブレットで表示した時のメニューボタン -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- メニュー -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- 左寄せメニュー -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="{{ route('home') }}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ route('about') }}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ route('contact') }}">Contact</a>
        </li>
      </ul>

      <!-- 右寄せメニュー -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>

        <!-- ドロップダウンメニュー -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            User Name <span class="caret"></span>
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

メニューの左側に表示される、”My Blog”, “Home”, “Contact”, “About” には実際にリンクを張っています。メニューの右側に表示される、”Login”, “Register”, “User Name”, “Logout” は、現段階ではリンクを張っていないダミーメニューです。

レイアウトでナビゲーションバーを参照

layout.blade.php で navbar.blade.php を使用するように修正します。

{{-- resouces/views/layout.blade.php --}}

...
<body>
    {{-- ナビゲーションバーの Partial を使用 --}}
    @include('navbar')

    <div class="container">
        @if (Session::has('flash_message'))
            <div class="alert alert-success">{{ Session::get('flash_message') }}</div>
        @endif

        @yield('content')
    </div>
...

これでナビゲーションメニューの実装は完了です。


動作確認

http://localhost:8000/ にアクセスして、表示と動作確認をしてみてください。Bootstrap のお陰で、かっこいいメニューに仕上がっています。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中