Bài 34: Hiển thị menu đa cấp

 

 -    Vào resoucer => views => components => tạo file main_menu.blade.php

<div class="mainmenu pull-left">
    <ul class="nav navbar-nav collapse navbar-collapse">
        <li><a href="{{ route("home") }}" class="active">Home</a></li>
        @foreach($categorysLimit as $categoryParent)
        <li class="dropdown"><a href="#">
                {{$categoryParent->name}}
                <i class="fa fa-angle-down"></i></a>
            @include('components.child_menu',['categoryParent'=> $categoryParent])
        </li>
        @endforeach
        <li><a href="404.html">404</a></li>
        <li><a href="contact-us.html">Contact</a></li>
    </ul>
</div>

 -    Vào resoucer => views => components => tạo file child_menu.blade.php

@if($categoryParent->categoryChildrent->count())
    <ul role="menu" class="sub-menu">
        @foreach($categoryParent->categoryChildrent as $categoryChild)
            <li><a href="shop.html">{{$categoryChild->name}}</a></li>
            @if($categoryChild->categoryChildrent->count())
                @include('components.child_menu',['categoryParent'=>$categoryChild])
            @endif
            @endforeach

    </ul>
@endif

-    Vào HomeController.php

<?php

namespace App\Http\Controllers;

use App\Category;
use App\Product;
use App\Slider;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        $sliders = Slider::latest()->get();
        $categorys = Category::where('parent_id', 0)->latest()->get();
        $products = Product::latest()->take(6)->get();
        $productsRecommend = Product::latest('views_count','desc')->take(12)->get();
        $categorysLimit = Category::where('parent_id',0)->take(3)->get();
        return view('home.home',compact('sliders','categorys','products','productsRecommend','categorysLimit'));
    }
    public function test()
    {
        return view('test');
    }
}

-    Vào web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/','HomeController@index')->name('home');
Route::get('/test','HomeController@test');

-    Vào resoucer => views => components => header.blade.php

<header id="header"><!--header-->
    <div class="header_top"><!--header_top-->
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="contactinfo">
                        <ul class="nav nav-pills">
                            <li>
                                <a href="#"><i class="fa fa-phone"></i>
                                    {{getConfigValueFromSettingTable('phone_contact')}}
                                </a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-envelope"></i>
                                    {{getConfigValueFromSettingTable('email')}}
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="social-icons pull-right">
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="{{getConfigValueFromSettingTable('facebook_link')}}">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header_top-->

    <div class="header-middle"><!--header-middle-->
        <div class="container">
            <div class="row">
                <div class="col-md-4 clearfix">
                    <div class="logo pull-left">
                        <a href="index.html"><img src="/eshopper/images/home/logo.png" alt="" /></a>
                    </div>
                    <div class="btn-group pull-right clearfix">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
                                USA
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="">Canada</a></li>
                                <li><a href="">UK</a></li>
                            </ul>
                        </div>

                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
                                DOLLAR
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="">Canadian Dollar</a></li>
                                <li><a href="">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 clearfix">
                    <div class="shop-menu clearfix pull-right">
                        <ul class="nav navbar-nav">
                            <li><a href=""><i class="fa fa-user"></i> Account</a></li>
                            <li><a href=""><i class="fa fa-star"></i> Wishlist</a></li>
                            <li><a href="checkout.html"><i class="fa fa-crosshairs"></i> Checkout</a></li>
                            <li><a href="cart.html"><i class="fa fa-shopping-cart"></i> Cart</a></li>
                            <li><a href="login.html"><i class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-middle-->

    <div class="header-bottom"><!--header-bottom-->
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    @include('components.main_menu')

                </div>
                <div class="col-sm-3">
                    <div class="search_box pull-right">
                        <input type="text" placeholder="Search"/>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-bottom-->
</header><!--/header-->