Drag And Drop Mega Menu Builder For Bootstrap - Menu Editor

Drag And Drop Mega Menu Builder For Bootstrap - Menu Editor
File Size: 101 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery Menu Editor enables you to dynamically create a drag'n'drop, multi-level menu builder/creator/generator for your Bootstrap project.

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.

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 4 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.min.css">
<script src="bootstrap-iconpicker.min.js"></script>
<script src="iconset-fontawesome.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
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.

Change log:

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.