Multilevel Menu Editor for Bootstrap 4.x (Html & Javascript code). This jQuery Menu Editor plugin enables you to dynamically create a drag’n’drop, multi-level menu builder/creator/generator for your Bootstrap 4 and Bootstrap 3 website.
Features
- Add, Update & Remove items from Menu
- Multilevel Drag & Drop
- Form Item Editor
- Include IconPicker Plugin
- Support to mobile devices
- Load data from JSON string
- The output is a Json string
Libraries
This project was inspirated and based in jQuery-Sortable-lists http://camohub.github.io/jquery-sortable-lists/index.html and added many features.
Requirements
- Bootstrap 4.x
- jQuery >= 3.x
- Fontawesome 5.3.1
- Bootstrap Iconpicker 1.10.0
Include the required JS and CSS Library.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/> <link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js">script> <script type="text/javascript" src="bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js">script> <script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js">script> <script type="text/javascript" src="jquery-menu-editor.min.js">script> |
Creating the Drag & Drop list.
|
Creating the form
- The inputs for items should be have the class=”item-menu”
- The icon picker should be have the id=[LIST_ID]+”_icon”
|
Create and Setting the MenuEditor object
// icon picker options var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"}; // sortable list options var sortableListOptions = { placeholderCss: {'background-color': "#cccccc"} }; var editor = new MenuEditor('myEditor', {listOptions: sortableListOptions, iconPicker: iconPickerOptions}); editor.setForm($('#frmEdit')); editor.setUpdateButton($('#btnUpdate')); //Calling the update method $("#btnUpdate").click(function(){ editor.update(); }); // Calling the add method $('#btnAdd').click(function(){ editor.add(); }); |
Load data from a Json
var arrayjson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}]; editor.setData(arrayJson); |
Handle the output.
var str = editor.getString(); $("#myTextarea").text(str); |
See live demo and download source code.
This awesome plugin is developed by davicotico. Visit their official github repository for more information and follow for future updates.