1. Create table menu as below
    class CreateMenusTable extends Migration
    
    {
    
        /**
    
         * Run the migrations.
    
         *
    
         * @return void
    
         */
    
        public function up()
    
        {
    
            Schema::create('menus', function (Blueprint $table) {
    
                $table->increments('id');
    
                $table->string('name');
    
                $table->integer('parent_id');
    
                $table->integer('display_order')->nullable();
    
                $table->timestamps();
    
            });
    
        }
    
        /**
    
         * Reverse the migrations.
    
         *
    
         * @return void
    
         */
    
        public function down()
    
        {
    
            Schema::drop('menus');
    
        }
    
    }
  2. In App->Menus.php
    namespace App; use Illuminate\Database\Eloquent\Model; use App\Menus;
    
    class Menus extends Model
    
     {
    
     protected $table = 'Menus';
    
    public function parent() {
    
    return $this->hasOne('App\Menus', 'id', 'parent_id')->orderBy('display_order');
    
    }
    
    public function children() {
    
    return $this->hasMany('App\Menus', 'parent_id', 'id')->orderBy('display_order');
    
    }
    
    public static function tree() {
    
    return static::with(implode('.', array_fill(0, 100, 'children')))->where('parent_id', '=', '0')->orderBy('display_order')->get();
    
    }
    
     }
  3. In app->Http->Controllers
    1. Create file HomeController.php with following
      namespace App\Http\Controllers;
      
      use App\Http\Controllers\Controller;
      
      use App\User;
      
      use App\Menus;
      
      class HomeController extends Controller {
      
           public function index()
      
          {
      
              $Menu =new Menus;
      
              
      
              try {
      
                  $allCategories=$Menu->tree();
      
                  
      
              } catch (Exception $e) {
      
                  
      
                  //no parent category found
      
              }
      
              return view('index')->with('categories', $allCategories);
      
          }
      
      }
  4. In app->Http->routes.php
    1. Just add these code.
      Route::get('/', 'HomeController@index');
  5. Now Let’s create Index page
    1. In resources->views
    2. Create file index.blade.php and add below codes.
      <!DOCTYPE html>
      
      <html lang="en">
      
          <head>
      
              <meta charset="utf-8">
      
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
              <meta name="viewport" content="width=device-width, initial-scale=1">
      
              <title>Menu Example</title>
      
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
      
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      
              {!! Html::style('css/style.css') !!}
      
          </head>
      
          <body>
      
              <div class="main_menu_area hidden-xs light-blue darken-4 ">
      
                  <div class="container">
      
                      <div class="row">
      
                          <div class="col-md-12">
      
                              <div class="mainnmenu">
      
                                  <nav>
      
                                      <ul class="main-nagivation">
      
                                      @each('partials.index', $categories, 'category', 'partials.nothing')
      
                                      </ul>
      
                                  </nav>
      
                              </div>
      
                          </div>
      
                      </div>
      
                  </div>
      
              </div>
      
          </body>
      
      </html>
  6. Now create partial page
    1. In resources->views
    2. Create folder partials
    3. Create index.blade.php inside partials folder and add below codes.
      @if ((count($category->children) > 0) AND ($category->parent_id > 0))
      
          <li><a href="#">{{ $category->name }} <i class="fa fa-chevron-right"></i></a>
      
      @else
      
          <li><a href="#">{{ $category->name }}</a>
      
      @endif
      
          @if (count($category->children) > 0)
      
              <ul>
      
              @foreach($category->children as $category)
      
                  @include('partials.index', $category)
      
              @endforeach
      
              </ul>
      
          @endif
      
          </li>
  7. Now let’s add style to our page
    1. In public folder create css folder
    2. crate styles.css file inside css folder and add below codes.
      ul {
      
        list-style: none;
      
        padding: 0;
      
        margin: 0;
      
        background: #01579B;
      
      }
      
      ul li {
      
        display: block;
      
        position: relative;
      
        float: left;
      
        background: #01579B;
      
      }
      
      /* This hides the dropdowns */
      
      li ul { display: none; }
      
      ul li a {
      
        display: block;
      
        padding: 1em;
      
        text-decoration: none;
      
        white-space: nowrap;
      
        color: #fff;
      
        background: #01579B;
      
        -webkit-transition: background-color 0.5s;
      
        -moz-transition: background-color 0.5s;
      
        -o-transition: background-color 0.5s;
      
        transition: background-color 0.5s;
      
      }
      
      ul li a:hover { background: #E53935;
      
          color: #fff;
      
      text-decoration: none; 
      
      }
      
      /* Display the dropdown */
      
      @-webkit-keyframes fadeIn {
      
          from { opacity: 0; }
      
            to { opacity: 1; }
      
      }  
      
      @keyframes fadeIn {
      
          from { opacity: 0; }
      
            to { opacity: 1; }
      
      }
      
      li:hover > ul {
      
        display: block;
      
        position: absolute;
      
        -webkit-animation: fadeIn 1s;
      
          animation: fadeIn 1s;
      
      }
      
      li:hover li { float: none; }
      
      li:hover a { background: #01579B; }
      
      li:hover li a:hover { background: #E53935; }
      
      .main-navigation li ul li { border-top: 0; }
      
      /* Displays second level dropdowns to the right of the first level dropdown */
      
      ul ul ul {
      
        left: 100%;
      
        top: 0;
      
      }
      
      /* Simple clearfix */
      
      ul:before,
      
      ul:after {
      
        content: " "; /* 1 */
      
        display: table; /* 2 */
      
      }
      
      ul:after { clear: both; }
  8. Enjoy !!! Now view the page in browser.  You will get database driven multi-level dynamic menu.
  9. Finally if you want to test seeding fake data use Faker as below
    1. In database->seeds->DatabaseSeeder.php modify run function as below
      <?php
      
      use Illuminate\Database\Seeder;
      
      use Faker\Factory as Faker;
      
      class DatabaseSeeder extends Seeder
      
      {
      
          /**
      
           * Run the database seeds.
      
           *
      
           * @return void
      
           */
      
          public function run()
      
          {
      
             $faker = Faker::create();
      
                 foreach (range(1,6) as $index) {
      
                  DB::table('menus')->insert([
      
                      'name' => $faker->name,
      
                      'parent_id' => 0
      
                  ]);
      
              }
      
              foreach (range(1,50) as $index) {
      
                  DB::table('menus')->insert([
      
                      'name' => $faker->name,
      
                      'parent_id' => $faker->numberBetween(1,20)
      
                  ]);
      
              }
      
          }
      
      }

How to create Dynamic Multilevel Drop Down Menu in Laravel 5.2

Leave a Reply

Your email address will not be published. Required fields are marked *