Laravel JQuery MySQL Technology

WordPress-like Multilevel Drag-and-Drop Menu in Laravel

Byadmin

Oct 19, 2022 #Drag and Drop menu

Implementing a multilevel drag-and-drop menu in Laravel allows you to create a dynamic menu system with a main menu, submenus, and nested submenus. Users can easily manage website menus by dragging and dropping items to reorder them. Follow these steps to achieve a 3-level drag-and-drop menu in your Laravel project.

Step 1: Include jQuery Files

Download the necessary jQuery files from the following sources:

Step 2: Create Database Tables

Create two MySQL tables to store menu items and menus.

  1. menuitems
  2. menus
-- Table for menu items
CREATE TABLE `menuitems` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `slug` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `type` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
  `target` int(11) NOT NULL DEFAULT 0,
  `menu_id` bigint(20) unsigned DEFAULT NULL,
  `depth` int(11) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `admin_menu_items_menu_foreign` (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Table for menus
CREATE TABLE `menus` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `location` varchar(300) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `content` longtext COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Step 3: Create Models

Create two model files in Laravel to interact with the menuitems and menus tables.

  1. Menu.php
<?php
namespace App\Models\manage;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Menu extends Model
{
    use HasFactory;
    protected $fillable = ['title','location','content','created_at','updated_at'];    
}

2. Menuitem.php

<?php
namespace App\Models\manage;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Menuitem extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'slug', 'type', 'name', 'target', 'menu_id', 'depth'];
}

Step 4: Create Controller

Create a controller file to manage the menu. This controller will handle operations such as displaying menus, adding items, updating, and deleting.

MenuController.php

<?php

namespace app\Http\manage\Controllers;

namespace App\Http\Controllers\manage;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\manage\Menu;
use App\Models\manage\Page;
use App\Models\manage\Menuitem;
use Illuminate\Support\Str;
use session;
use DB;

class MenuController extends Controller
{

  public function index()
  {
    $menuitems = '';
    $desiredMenu = '';
    if (isset($_GET['id']) && $_GET['id'] != 'new') {
      $id = $_GET['id'];
      $desiredMenu = menu::where('id', $id)->first();
      if ($desiredMenu->content != '') {
        $menuitems = json_decode($desiredMenu->content);
        $menuitems = $menuitems[0];
        foreach ($menuitems as $menu) {
          $menu->title = menuitem::where('id', $menu->id)->value('title');
          $menu->name = menuitem::where('id', $menu->id)->value('name');
          $menu->slug = menuitem::where('id', $menu->id)->value('slug');
          $menu->target = menuitem::where('id', $menu->id)->value('target');
          $menu->type = menuitem::where('id', $menu->id)->value('type');
          if (!empty($menu->children[0])) {
            foreach ($menu->children[0] as $child) {
              $child->title = menuitem::where('id', $child->id)->value('title');
              $child->name = menuitem::where('id', $child->id)->value('name');
              $child->slug = menuitem::where('id', $child->id)->value('slug');
              $child->target = menuitem::where('id', $child->id)->value('target');
              $child->type = menuitem::where('id', $child->id)->value('type');
              if (!empty($child->children[0])) {
                foreach ($child->children[0] as $grand) {
                  $grand->title = menuitem::where('id', $grand->id)->value('title');
                  $grand->name = menuitem::where('id', $grand->id)->value('name');
                  $grand->slug = menuitem::where('id', $grand->id)->value('slug');
                  $grand->target = menuitem::where('id', $grand->id)->value('target');
                  $grand->type = menuitem::where('id', $grand->id)->value('type');
                }
              }
            }
          }
        }
      } else {
        $menuitems = menuitem::where('menu_id', $desiredMenu->id)->get();
      }
    } else {
      $desiredMenu = menu::orderby('id', 'DESC')->first();
      if ($desiredMenu) {
        if ($desiredMenu->content != '') {
          $menuitems = json_decode($desiredMenu->content);
          $menuitems = $menuitems[0];
          foreach ($menuitems as $menu) {
            $menu->title = menuitem::where('id', $menu->id)->value('title');
            $menu->name = menuitem::where('id', $menu->id)->value('name');
            $menu->slug = menuitem::where('id', $menu->id)->value('slug');
            $menu->target = menuitem::where('id', $menu->id)->value('target');
            $menu->type = menuitem::where('id', $menu->id)->value('type');
            if (!empty($menu->children[0])) {
              foreach ($menu->children[0] as $child) {
                $child->title = menuitem::where('id', $child->id)->value('title');
                $child->name = menuitem::where('id', $child->id)->value('name');
                $child->slug = menuitem::where('id', $child->id)->value('slug');
                $child->target = menuitem::where('id', $child->id)->value('target');
                $child->type = menuitem::where('id', $child->id)->value('type');
                if (!empty($child->children[0])) {
                  foreach ($child->children[0] as $grand) {
                    $grand->title = menuitem::where('id', $grand->id)->value('title');
                    $grand->name = menuitem::where('id', $grand->id)->value('name');
                    $grand->slug = menuitem::where('id', $grand->id)->value('slug');
                    $grand->target = menuitem::where('id', $grand->id)->value('target');
                    $grand->type = menuitem::where('id', $grand->id)->value('type');
                  }
                }
              }
            }
          }
        } else {
          $menuitems = menuitem::where('menu_id', $desiredMenu->id)->get();
        }
      }
    }

    $data['categories'] = Page::all();
    $data['desiredMenu'] = $desiredMenu;
    $data['menuitems'] = $menuitems;
    $data['menus'] = Menu::all();
    echo $this->admin_view('admin.menu.index', $data);
  }



  public function store(Request $request)
  {
    $mdata = $request->all();
    if (Menu::create($mdata)) {
      $newdata = menu::orderby('id', 'DESC')->first();
      session::flash('success', 'Menu saved successfully !');
      return redirect("manage/manage-menus?id=$newdata->id");
    } else {
      return redirect()->back()->with('error', 'Failed to save menu !');
    }
  }


  public function addCatToMenu(Request $request)
  {
    $data = $request->all();
    $menuid = $request->menuid;
    $ids = $request->ids;
    $menu = menu::findOrFail($menuid);
    if ($menu->content == '') {
      foreach ($ids as $id) {
        $data['title'] = page::where('id', $id)->value('title');
        $data['slug'] = page::where('id', $id)->value('url');
        $data['type'] = 'category';
        $data['menu_id'] = $menuid;
        $data['updated_at'] = NULL;
        menuitem::create($data);
      }
    } else {
      $olddata = json_decode($menu->content, true);
      foreach ($ids as $id) {
        $data['title'] = page::where('id', $id)->value('title');
        $data['slug'] = page::where('id', $id)->value('url');
        $data['type'] = 'category';
        $data['menu_id'] = $menuid;
        $data['updated_at'] = NULL;
        menuitem::create($data);
      }
      foreach ($ids as $id) {
        $array['title'] = page::where('id', $id)->value('title');
        $array['slug'] = page::where('id', $id)->value('url');
        $array['name'] = NULL;
        $array['type'] = 'category';
        $array['target'] = NULL;
        $array['id'] = menuitem::where('slug', $array['slug'])
        ->where('name', $array['name'])
        ->where('type', $array['type'])->value('id');
        $array['children'] = [[]];
        $array['grandchildren'] = [[]];

        array_push($olddata[0], $array);
        $oldata = json_encode($olddata);
        $menu->update(['content' => $olddata]);
      }
    }
  }


  public function addPostToMenu(Request $request)
  {
    $data = $request->all();
    $menuid = $request->menuid;
    $ids = $request->ids;
    $menu = menu::findOrFail($menuid);
    if ($menu->content == '') {
      foreach ($ids as $id) {
        $data['title'] = post::where('id', $id)->value('title');
        $data['slug'] = post::where('id', $id)->value('slug');
        $data['type'] = 'post';
        $data['menu_id'] = $menuid;
        $data['updated_at'] = NULL;
        menuitem::create($data);
      }
    } else {
      $olddata = json_decode($menu->content, true);
      foreach ($ids as $id) {
        $data['title'] = post::where('id', $id)->value('title');
        $data['slug'] = post::where('id', $id)->value('slug');
        $data['type'] = 'post';
        $data['menu_id'] = $menuid;
        $data['updated_at'] = NULL;
        menuitem::create($data);
      }
      foreach ($ids as $id) {
        $array['title'] = post::where('id', $id)->value('title');
        $array['slug'] = post::where('id', $id)->value('slug');
        $array['name'] = NULL;
        $array['type'] = 'post';
        $array['target'] = NULL;
        $array['id'] = menuitem::where('slug', $array['slug'])
        ->where('name', $array['name'])
        ->where('type', $array['type'])
        ->orderby('id', 'DESC')->value('id');
        $array['children'] = [[]];
        $array['grandchildren'] = [[]];

        array_push($olddata[0], $array);
        $oldata = json_encode($olddata);
        $menu->update(['content' => $olddata]);
      }
    }
  }

  public function addCustomLink(Request $request)
  {
    $data = $request->all();
    $menuid = $request->menuid;
    $menu = menu::findOrFail($menuid);
    if ($menu->content == '') {
      $data['title'] = $request->link;
      $data['slug'] = $request->url;
      $data['type'] = 'custom';
      $data['menu_id'] = $menuid;
      $data['updated_at'] = NULL;
      menuitem::create($data);
    } else {
      $olddata = json_decode($menu->content, true);
      $data['title'] = $request->link;
      $data['slug'] = $request->url;
      $data['type'] = 'custom';
      $data['menu_id'] = $menuid;
      $data['updated_at'] = NULL;
      menuitem::create($data);
      $array = [];
      $array['title'] = $request->link;
      $array['slug'] = $request->url;
      $array['name'] = NULL;
      $array['type'] = 'custom';
      $array['target'] = NULL;
      $array['id'] = menuitem::where('slug', $array['slug'])
      ->where('name', $array['name'])
      ->where('type', $array['type'])->orderby('id', 'DESC')->value('id');
      $array['children'] = [[]];
      $array['grandchildren'] = [[]];

      array_push($olddata[0], $array);
      $oldata = json_encode($olddata);
      $menu->update(['content' => $olddata]);
    }
  }

  public function updateMenu(Request $request)
  {
    $newdata = $request->all();
    $menu = menu::findOrFail($request->menuid);
    $content = $request->data;
    $newdata = [];
    $newdata['location'] = $request->location;
    $newdata['content'] = json_encode($content);
    $menu->update($newdata);
  }

  public function updateMenuItem(Request $request)
  {
    $data = $request->all();
    $item = menuitem::findOrFail($request->id);
    $item->update($data);
    return redirect()->back();
  }

  public function deleteMenuItem($id, $key, $in = '')
  {
    $menuitem = menuitem::findOrFail($id);
    $menu = menu::where('id', $menuitem->menu_id)->first();
    if ($menu->content != '') {
      $data = json_decode($menu->content, true);
      $maindata = $data[0];
      if ($in == '') {
        unset($data[0][$key]);
        $newdata = json_encode($data);
        $menu->update(['content' => $newdata]);
      } elseif ($in == 'children') {
        unset($data[0][$key]['children'][0][$in]);
        $newdata = json_encode($data);
        $menu->update(['content' => $newdata]);
      } else {
        unset($data[0][$key]['children'][0][$in]);
        $newdata = json_encode($data);
        $menu->update(['content' => $newdata]);
      }
    }
    $menuitem->delete();
    return redirect()->back();
  }

  public function destroy(Request $request)
  {
    menuitem::where('menu_id', $request->id)->delete();
    menu::findOrFail($request->id)->delete();
    return redirect('manage/manage-menus')
    ->with('success', 'Menu deleted successfully');
  }
}

Step 5: Create Routes in web.php

Define routes for accessing menu-related functionalities.

web.php

Route::get('manage/manage-menus/{id?}', 'manage\MenuController@index');
    Route::post('manage/create-menu', 'manage\MenuController@store');

    Route::get('manage/add-categories-to-menu', 'manage\MenuController@addCatToMenu');
    Route::get('manage/add-post-to-menu', 'manage\MenuController@addPostToMenu');
    Route::get('manage/add-custom-link', 'manage\MenuController@addCustomLink');
    Route::get('manage/update-menu', 'manage\MenuController@updateMenu');

    Route::get('manage/delete-menuitem/{id}/{key}/{in?}', 'manage\MenuController@deleteMenuItem');
    Route::post('manage/update-menuitem/{id}', 'manage\MenuController@updateMenuItem');

    Route::get('manage/delete-menu/{id}','manage\MenuController@destroy');

Step 6: Create index.blade.php

Create a Blade file to display the menu. Customize the file based on your project’s needs.

<div class="page-content fade-in-up">
    <div class="row">
        <div class="col-md-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">Menus</div>
                    <div class="ibox-tools">
                        <a class="ibox-collapse"><i class="fa fa-minus"></i></a>

                    </div>
                </div>
               
  <div class="ibox-body">
    @php $desiredMenu = $data['desiredMenu'];
    $menuitems = $data['menuitems']; @endphp
    <div class="col-md-12 row" style="margin-bottom: 20px;">

        <script src="{{ url('/')}}/admin_assets/js/new_sortable.js"></script>
        <div id="serialize_output">@if($data['desiredMenu']){{ $data['desiredMenu']-> content }}@endif
        </div>

        <div class="container-fluid">

            <div class="content info-box">
                @if(count($data['menus']) > 0)
                Select a menu to edit:
                <form action="{{url('manage/manage-menus')}}" class="form-inline">
                    <select name="id">
                        @foreach($data['menus'] as $menu)
                        @if($data['desiredMenu'] != '')
                        <option value="{{$menu->id}}" @if($menu->id == $data['desiredMenu']->id)
                            selected @endif>{{ $menu-> title}}</option>
                        @else
                        <option value="{{$menu->id}}">{{ $menu-> title}}</option>
                        @endif
                        @endforeach
                    </select>
                    <button class="btn btn-sm btn-default btn-menu-select">Select</button>
                </form>
                or <a href="{{url('manage/manage-menus?id=new')}}">Create a new menu</a>.
                @endif
            </div>

           
            <div class="row" id="main-row">
    <div class="col-sm-4 cat-form @if(count($data['menus']) == 0) disabled @endif">
        <h3><span>Add Menu Items</span></h3>

        <div class="ibox-group" id="menu-items">
            <div class="ibox   ibox-success">
                <div class="ibox-head">
                    <a href="#categories-list" data-toggle="collapse" data-parent="#menu-items" class="clrwhite">
                        Categories <span class="caret"></span>
                    </a>
                </div>
                <div class="ibox-collapse collapse in" id="categories-list">
                    <div class="ibox-body">
                        <div class="item-list-body">
                            @foreach($data['categories'] as $cat)
                            <p><input type="checkbox" name="select-category[]" value="{{$cat->id}}">
                             {{ $cat-> title}}
                            </p>
                            @endforeach
                        </div>
                        <div class="item-list-footer">
                            <label class="btn btn-sm btn-default"><input type="checkbox" id="select-all-categories">
                             Select All
                            </label>
                            <button type="button" class="pull-right btn btn-default btn-sm" id="add-categories">
                                Add to Menu
                            </button>
                        </div>
                    </div>
                </div>
                <script>
                    $('#select-all-categories').click(function(event) {
                        if (this.checked) {
                            $('#categories-list :checkbox').each(function() {
                                this.checked = true;
                            });
                        } else {
                            $('#categories-list :checkbox').each(function() {
                                this.checked = false;
                            });
                        }
                    });
                </script>
            </div>

            <div class="ibox ibox-success">
                <div class="ibox-head">
                    <a href="#custom-links" data-toggle="collapse" data-parent="#menu-items" class="clrwhite">
                        Custom Links <span class="caret"></span>
                    </a>
                </div>
                <div class="ibox-collapse collapse" id="custom-links">
                    <div class="ibox-body">
                        <div class="item-list-body">
                            <div class="form-group">
                                <label>URL</label>
                                <input type="url" id="url" class="form-control" placeholder="https://">
                            </div>
                            <div class="form-group">
                                <label>Link Text</label>
                                <input type="text" id="linktext" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="item-list-footer">
                     <button type="button" class="pull-right btn btn-default btn-sm" id="add-custom-link">
                                Add to Menu</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-8 cat-view">
        <h3><span>Menu Structure</span></h3>

        @if($desiredMenu == '')
        <h4>Create New Menu</h4>
        <form method="post" action="{{url('manage/create-menu')}}">
            {{ csrf_field() }}
            <div class="row">
                <div class="col-sm-12">
                    <label>Name</label>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="title" class="form-control">
                    </div>
                </div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-sm btn-primary">Create Menu</button>
                </div>
            </div>
        </form>
        @else
        @php if(isset($_GET['id']) && $_GET['id']=='new') { @endphp
        <h4>Create New Menu</h4>
        <form method="post" action="{{url('manage/create-menu')}}">
            {{ csrf_field() }}
            <div class="row">
                <div class="col-sm-12">
                    <label>Name</label>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" name="title" class="form-control">
                    </div>
                </div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-sm btn-primary">Create Menu</button>
                </div>
            </div>
        </form>
        @php } @endphp
        <div id="menu-content">
    <div id="result"></div>
    <div style="min-height: 240px;">
        <p>Select categories, pages or add custom links to menus.</p>
        @if($desiredMenu != '')
        <ul class="menu ui-sortable" id="menuitems">
            @if(!empty($menuitems))
            @foreach($menuitems as $key=>$item)

            <li data-id="{{$item->id}}"><span class="menu-item-bar"><i class="fa fa-arrows"></i> @if(empty($item->name))
        {{ $item-> title}} @else {{ $item-> name}} @endif 
        <a href="#collapse{{$item->id}}" class="pull-right" data-toggle="collapse"><i class="caret"></i></a></span>
    <div class="collapse" id="collapse{{$item->id}}">
        <div class="input-box">
            <form method="post" action="{{url('manage/update-menuitem')}}/{{$item->id}}">
                {{ csrf_field() }}
                <div class="form-group">
                <label>Link Name</label>
                <input type="text" name="name" value="@if(empty($item->name)) {{$item->title}} @else {{$item->name}} @endif" class="form-control">
                </div>
                @if($item->type == 'custom')
                <div class="form-group">
                    <label>URL</label>
                    <input type="text" name="slug" value="{{$item->slug}}" class="form-control">
                </div>
                <div class="form-group">
                    <input type="checkbox" name="target" value="_blank" @if($item->target == '_blank') checked @endif>
                    Open in a new tab
                </div>
                @endif
                <div class="form-group">
                    <button class="btn btn-sm btn-primary">Save</button>
                    <a href="{{url('manage/delete-menuitem')}}/{{$item->id}}/{{$key}}" class="btn btn-sm btn-danger">Delete</a>
                </div>
            </form>
        </div>
    </div>
    <ul>
        @if(isset($item->children))
        @foreach($item->children as $m)
        @foreach($m as $in=>$cdata)

        <li data-id="{{$cdata->id}}" class="menu-item"> <span class="menu-item-bar"><i class="fa fa-arrows"></i>
                @if(empty($cdata->name)) {{ $cdata-> title}} @else
                {{ $cdata-> name}} @endif <a href="#collapse{{$cdata->id}}" class="pull-right" data-toggle="collapse"><i class="caret"></i></a></span>
            <div class="collapse" id="collapse{{$cdata->id}}">
                <div class="input-box">
                    <form method="post" action="{{url('manage/update-menuitem')}}/{{$cdata->id}}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Link Name</label>
                <input type="text" name="name" value="@if(empty($cdata->name)) {{$cdata->title}} @else {{$cdata->name}} @endif" class="form-control">
                        </div>
                        @if($cdata->type == 'custom')
                        <div class="form-group">
                            <label>URL</label>
                            <input type="text" name="slug" value="{{$cdata->slug}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="checkbox" name="target" value="_blank" @if($cdata->target ==
                            '_blank') checked @endif> Open in a new tab
                        </div>
                        @endif
                        <div class="form-group">
                            <button class="btn btn-sm btn-primary">Save</button>
                            <a href="{{url('manage/delete-menuitem')}}/{{$cdata->id}}/{{$key}}/{{$in}}" class="btn btn-sm btn-danger">Delete</a>
                        </div>
                    </form>
                </div>
            </div>

            <ul>
                @if(isset($cdata->children))
                @foreach($cdata->children as $q)
                @foreach($q as $gin=>$gdata)

                <li data-id="{{$gdata->id}}" class="menu-item"> <span class="menu-item-bar"><i class="fa fa-arrows"></i>
        @if(empty($gdata->name)) {{ $gdata-> title}} @else
        {{ $gdata-> name}} @endif <a href="#collapse{{$gdata->id}}" class="pull-right" data-toggle="collapse"><i class="caret"></i></a></span>
    <div class="collapse" id="collapse{{$gdata->id}}">
        <div class="input-box">
            <form method="post" action="{{url('manage/update-menuitem')}}/{{$gdata->id}}">
                {{ csrf_field() }}
                <div class="form-group">
                    <label>Link Name</label>
                    <input type="text" name="name" value="@if(empty($gdata->name)) {{$gdata->title}} @else {{$gdata->name}} @endif" class="form-control">
                </div>
                @if($gdata->type == 'custom')
                <div class="form-group">
                    <label>URL</label>
                    <input type="text" name="slug" value="{{$gdata->slug}}" class="form-control">
                </div>
                <div class="form-group">
                    <input type="checkbox" name="target" value="_blank" @if($gdata->target == '_blank')
                    checked @endif> Open in a new tab
                </div>
                @endif
                <div class="form-group">
                    <button class="btn btn-sm btn-primary">Save</button>
                    <a href="{{url('manage/delete-menuitem')}}/{{$gdata->id}}/{{$key}}/{{$in}}/{{$gin}}" class="btn btn-sm btn-danger">Delete</a>
                </div>
            </form>
        </div>
    </div>
    <ul></ul>
</li>
                @endforeach
                @endforeach
                @endif
            </ul>
        </li>
        @endforeach
        @endforeach
        @endif
    </ul>
</li>
            @endforeach
            @endif
        </ul>
        @endif
    </div>
    @if($desiredMenu != '')
    <div class="form-group menulocation">
        <label><b>Menu Location</b></label>
        <p><label><input type="radio" name="location" value="1" @if($desiredMenu->location == 1) checked @endif> Header</label>
        </p>
        <p><label><input type="radio" name="location" value="2" @if($desiredMenu->location == 2) checked @endif> Main
                Navigation</label></p>
    </div>
    <div class="text-right">
        <button class="btn btn-sm btn-primary" id="saveMenu">Save Menu</button>
    </div>
    <p><a href="{{url('manage/delete-menu')}}/{{$desiredMenu->id}}">Delete Menu</a>
    </p>
    @endif
</div>
        @endif
    </div>
</div>
        </div>
        <style>
            .ibox {
                border: 1px solid #cbcaca;
            }

            .clrwhite {
                color: #fff !important;
            }

            .item-list,
            .info-box {
                background: #fff;
                padding: 10px;
            }

            .item-list-body {
                max - height: 300px;
                overflow-y: scroll;
            }

            .panel-body p {
                margin - bottom: 5px;
            }

            .info-box {
                margin - bottom: 15px;
            }

            .item-list-footer {
                padding - top: 10px;
            }

            .panel-heading a {
                display: block;
            }

            .form-inline {
                display: inline;
            }

            .form-inline select {
                padding: 4px 10px;
            }

            .btn-menu-select {
                padding: 4px 10px
            }

            .disabled {
                pointer - events: none;
                opacity: 0.7;
            }

            .menu-item-bar {
                background: #eee;
                padding: 5px 10px;
                border: 1px solid #d7d7d7;
                margin-bottom: 5px;
                width: 75%;
                cursor: move;
                display: block;
            }

            #serialize_output {
                display: none;
            }

            .menulocation label {
                font - weight: normal;
                display: block;
            }

            body.dragging,
            body.dragging * {
                cursor: move !important;
            }

            .dragged {
                position: absolute;
                z-index: 1;
            }

            ol.example li.placeholder {
                position: relative;
            }

            ol.example li.placeholder:before {
                position: absolute;
            }

            #menuitem {
                list - style: none;
            }

            #menuitem ul {
                list - style: none;
            }

            .input-box {
                width: 75%;
                background: #fff;
                padding: 10px;
                box-sizing: border-box;
                margin-bottom: 5px;
            }

            .input-box .form-control {
                width: 50%
            }

            .cat-view h3,
            .cat-form h3 {
                border - bottom: 3px solid #838383;
                padding: 3px 0px;
            }

            .cat-view h3 span,
            .cat-form h3 span {
                background - color: #838383;
                padding: 0px 5px;
                color: #fff;
            }

            .info-box {
                margin - bottom: 15px;
                border: 1px solid #e6e6e6;
            }
        </style>

    </div>
</div>
            </div>
            <!--ibox-->
        </div>
    </div>
</div>
< !--END PAGE CONTENT-->
    @if ($desiredMenu)
    <script>
        $('#add-categories').click(function() {
            var menuid = <?= $desiredMenu->id ?>;
            var n = $('input[name="select-category[]"]:checked').length;
            var array = $('input[name="select-category[]"]:checked');
            var ids = [];
            for (i = 0; i < n; i++) {
                ids[i] = array.eq(i).val();
            }
            if (ids.length == 0) {
                return false;
            }
            $.ajax({
                type: "get",
                data: {
                    menuid: menuid,
                    ids: ids
                },
                url: "{{ url('manage/add-categories-to-menu') }}",
                success: function(res) {
                    location.reload();
                }
            })
        })
        $('#add-posts').click(function() {
            var menuid = <?= $desiredMenu->id ?>;
            var n = $('input[name="select-post[]"]:checked').length;
            var array = $('input[name="select-post[]"]:checked');
            var ids = [];
            for (i = 0; i < n; i++) {
                ids[i] = array.eq(i).val();
            }
            if (ids.length == 0) {
                return false;
            }
            $.ajax({
                type: "get",
                data: {
                    menuid: menuid,
                    ids: ids
                },
                url: "{{ url('manage/add-post-to-menu') }}",
                success: function(res) {
                    location.reload();
                }
            })
        })
        $("#add-custom-link").click(function() {
            var menuid = <?= $desiredMenu->id ?>;
            var url = $('#url').val();
            var link = $('#linktext').val();
            if (url.length > 0 && link.length > 0) {
                $.ajax({
                    type: "get",
                    data: {
                        menuid: menuid,
                        url: url,
                        link: link
                    },
                    url: "{{url('manage/add-custom-link')}}",
                    success: function(res) {
                        location.reload();
                    }
                })
            }
        })
    </script>
    @endif
    <script>
        var group = $("#menuitems").sortable({
            group: 'serialization',
            onDrop: function($item, container, _super) {
                var data = group.sortable("serialize").get();
                var jsonString = JSON.stringify(data, null, ' ');
                $('#serialize_output').text(jsonString);
                _super($item, container);
            }
        });
    </script>

    @if ($desiredMenu)
    <script>
        $('#saveMenu').click(function() {
            var menuid = <?= $desiredMenu->id ?>;
            var location = $('input[name="location"]:checked').val();
            var newText = $("#serialize_output").text();
            var data = JSON.parse($("#serialize_output").text());
            console.log(data);

            $.ajax({
                type: "get",
                data: {
                    menuid: menuid,
                    data: data,
                    location: location
                },
                url: "{{ url('manage/update-menu') }}",
                success: function(res) {
                    window.location.reload();
                }
            })
        })
    </script>
    @endif

For complete setup please download our free laravel admin product.

By admin

Related Post

Technology Laravel PHP

Understanding Laravel Pulse: A Comprehensive Guide

Dec 6, 2023 admin
Laravel News PHP Technology

Presenting the Laravel Number Utility Class

Nov 21, 2023 admin
News Technology

Forecasting the Future: 2024 Trends in Software Development

Nov 14, 2023 admin

Leave a Reply

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

You missed

News

Unveiling Gemini: Google’s Groundbreaking Multimodal AI Era

December 9, 2023 admin
Technology Laravel PHP

Understanding Laravel Pulse: A Comprehensive Guide

December 6, 2023 admin
Laravel News PHP Technology

Presenting the Laravel Number Utility Class

November 21, 2023 admin
News Technology

Forecasting the Future: 2024 Trends in Software Development

November 14, 2023 admin