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

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

Routing

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

// app/Http/routes.php

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

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

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


View

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

resouces/views/navbar.blade.phpを作成します。
内容はBootstrap3のNavbarのサンプルをコピーして、リンク部分のみ修正しました。詳細はBootstrap3のサイトを参照してください。

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

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <!-- スマホやタブレットで表示した時のメニューボタン -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- ブランド表示 -->
            <a class="navbar-brand" href="/">My Blog</a>
        </div>

        <!-- メニュー -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 左寄せメニュー -->
            <ul class="nav navbar-nav">
                <li>{!! link_to_route('articles.index', 'Blog') !!}</li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/about">About</a></li>
            </ul>

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

                <!-- ドロップダウンメニュー -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User Name <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

メニューの左側に表示される、”My Blog”, “Blog”, “Contact”, “About” には実際にリンクを張っています。メニューの右側に表示される、”Login”, “Register”, “User Name”, “Profile”, “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/ にアクセスして、表示と動作確認をしてみてください。Bootstrap3 のお陰で、かっこいいメニューに仕上がっています。

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中