jQuery Plugins › jQuery Menu Plugins › jQuery Menu Editor

Drag And Drop Mega Menu Builder For Bootstrap - Menu Editor

File Size:	177 KB
Views Total:	45285
Last Update:	02/19/2023 02:02:00 UTC
Publish Date:	05/12/2017 03:24:14 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

Drag and drop to re-sort menu items.
Drag to indent items you wish to turn into a sub-menu.
Add/remove/edit menu items.
Allows to export to JSON strings.
Easy to integrate with jQuery Iconpicker plugin.
Supports both Bootstrap 4 and Bootstrap 3 frameworks.

How to use it:

1. Load the needed jQuery library and Twitter Bootstrap framework in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the Font Awesome 5 iconic font for more icons support.

<link rel="stylesheet" href="font-awesome.min.css">

3. Load the jQuery Iconpicker plugin for icon picker support.

<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css" />
<script src="bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js"></script>
<script src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

4. Load the jQuery Menu Editor's JavaScript after jQuery:

<script src="jquery-menu-editor.js"></script>

5. Create the menu edit, preview and output areas for the menu builder.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">Edit item</div>
        <div class="panel-body">
          <form id="frmEdit" class="form-horizontal">
            <input type="hidden" name="mnu_icon" id="mnu_icon">
            <div class="form-group">
              <label for="mnu_text" class="col-sm-2 control-label">Text</label>
              <div class="col-sm-10">
                <div class="input-group">
                  <input type="text" class="form-control" id="mnu_text" name="mnu_text" placeholder="Text">
                  <div class="input-group-btn">
                    <button id="mnu_iconpicker" class="btn btn-default" data-iconset="fontawesome" data-icon="" type="button"></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="mnu_href" class="col-sm-2 control-label">URL</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="mnu_href" name="mnu_href" placeholder="URL">
              </div>
            </div>
            <div class="form-group">
              <label for="mnu_target" class="col-sm-2 control-label">Target</label>
              <div class="col-sm-10">
                <select id="mnu_target" name="mnu_target" class="form-control">
                  <option value="_self">Self</option>
                  <option value="_blank">Blank</option>
                  <option value="_top">Top</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="mnu_title" class="col-sm-2 control-label">Tooltip</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="mnu_title" name="mnu_title" placeholder="Text">
              </div>
            </div>
          </form>
        </div>
        <div class="panel-footer">
          <button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fa fa-refresh"></i> Update</button>
          <button type="button" id="btnAdd" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading clearfix">
          <h5 class="pull-left">Menu</h5>
          <div class="pull-right">
            <button id="btnOut" type="button" class="btn btn-success"> <i class="glyphicon glyphicon-ok"></i> Save</button>
          </div>
        </div>
        <div class="panel-body" id="cont">
          <ul id="myList" class="sortableLists list-group">
            <li class="list-group-item" data-text="Home" data-icon="fa-home"
                                    data-href="http://home.com">
              <div><i class="fa fa-home"></i> <span class="txt">Home</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion2" data-icon="fa-bar-chart-o">
              <div><i class="fa fa-bar-chart-o"></i> <span class="txt">Opcion2</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion3" data-icon="fa-cloud-upload">
              <div><i class="fa fa-cloud-upload"></i> <span class="txt">Opcion3</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion4" data-icon="fa-crop">
              <div><i class="fa fa-crop"></i> <span class="txt">Opcion4</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion5" data-icon="fa-flask">
              <div><i class="fa fa-flask"></i> <span class="txt">Opcion5</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion6" data-icon="fa-map-marker">
              <div><i class="fa fa-map-marker"></i> <span class="txt">Opcion6</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
            </li>
            <li class="list-group-item" data-text="Opcion7" data-icon="fa-search">
              <div><i class="fa fa-search"></i> <span class="txt">Opcion7</span>
                <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
              </div>
              <ul>
                <li class="list-group-item" data-text="Opcion7-1" data-icon="fa-plug">
                  <div><i class="fa fa-plug"></i> <span class="txt">Opcion7-1</span>
                    <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
                  </div>
                </li>
                <li class="list-group-item" data-text="Opcion7-2" data-icon="fa-filter">
                  <div><i class="fa fa-filter"></i> <span class="txt">Opcion7-2</span>
                    <div class="btn-group pull-right"> <a href="#" class="btn btn-default btn-xs btnEdit">Edit</a> <a href="#" class="btn btn-danger btn-xs btnRemove">X</a> </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <label for="out">Output:</label>
      <textarea id="out" class="form-control" cols="50" rows="10"></textarea>
    </div>
  </div>
  <div>
    <div class="col-md-6"></div>
  </div>
</div>

5. Initialize the menu builder with some options.

// icon picker options
var iconPickerOpt = {};

// menu builder options
var options = {
    hintCss: {'border': '1px dashed #13981D'},
    placeholderCss: {'background-color': 'gray'},
    ignoreClass: 'btn',
    opener: {
      active: true,
      as: 'html',
      close: '<i class="fa fa-minus"></i>',
      open: '<i class="fa fa-plus"></i>',
      openerCss: {'margin-right': '10px'},
      openerClass: 'btn btn-success btn-xs'
    }
};

// initialize the menu builder
var editor = new MenuEditor('myList', {
  listOptions: options, 
  iconPicker: iconPickerOpt, 
  labelEdit: 'Edit', 
  labelRemove: 'X'
});

6. All default customization options.

currElClass: '',
placeholderClass: '',
placeholderCss: {
  'position': 'relative',
  'padding': 0
},
hintClass: '',
hintCss: {
  'display': 'none',
  'position': 'relative',
  'padding': 0
},
hintWrapperClass: '',
hintWrapperCss: { /* Description is below the defaults in this var section */ },
baseClass: '',
baseCss: {
  'position': 'absolute',
  'top': 0 - parseInt( jQBody.css( 'margin-top' ) ),
  'left': 0 - parseInt( jQBody.css( 'margin-left' ) ),
  'margin': 0,
  'padding': 0,
  'z-index': 2500
},
opener: {
  active: false,
  open: '',
  close: '',
  openerCss: {
    'float': 'left',
    'display': 'inline-block',
    'background-position': 'center center',
    'background-repeat': 'no-repeat'
  },
  openerClass: ''
},
listSelector: 'ul',
listsClass: '', // Used for hintWrapper and baseElement
listsCss: {},
insertZone: 50,
insertZonePlus: false,
scroll: 20,
ignoreClass: '',
isAllowed: function( cEl, hint, target ) { return true; },  // Params: current el., hint el.
onDragStart: function( e, cEl ) { return true; },  // Params: e jQ. event obj., current el.
onChange: function( cEl ) { return true; },  // Params: current el.
complete: function( cEl ) { return true; }  // Params: current el.

7. API methods.

// set form
editor.setForm($('#frmEdit'));

// set update button
editor.setUpdateButton($('#btnUpdate'));

// update
editor.update();

// add new item
editor.add();

// load data
var myData = [{
      "href":"https://jqueryscript.net",
      "icon":"fas fa-home",
      "text":"Home", 
      "target": "_blank", 
      "title": "jQueryScript Home",
      "children":[{
        "icon":"fas fa-plug",
        "text":"Settings",
        "children":[{
          "icon":"fas fa-filter",
          "text":"Profile"
        }]
      }]
    },
    // more menu data here
];
editor.setData(myData);

Changelog:

v1.1.1 (2023-02-19)

Fix: event being bound over once when page contains more than one editor
Bugfix

v1.1.0 (2020-10-26)

Added maximum level(maxLevel) option.

2018-10-30

Revert "Fix bug in mobile device: Button opener"
Fix a bug in mobile devices: Opener button

2018-10-29

v1.0.0

2018-06-01

Add new iconset FontAwesome 4.7.0

2018-05-24

Added support for Bootstrap 4.

2018-05-14

Improve the move buttons, simplify the code

2018-02-07

use var instead let (browser compatibility)
new setting: textConfirmDelete to confirm delete item

2018-01-12

Fixed an issue which occurs if the page is scrolled down a bit:

2017-11-25

fix: constructor;

2017-11-23

new methods for menu items: add, update; method setForm for form edit or and setUpdateButton

2017-11-12

fix item properties, add action buttons, iconpicker updated

2017-06-30

property icon now is the complete class for tag <i>

2017-06-02

JS & example update

2017-05-26

add new method and public function setData and getString

This awesome jQuery plugin is developed by davicotico. For more Advanced Usages, please check the demo page or visit the official website.

Drag And Drop Mega Menu Builder For Bootstrap - Menu Editor

Features:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review