MenuFromJSON 0.9.0

by Davicotico

Dynamically generate multi-level menu lists from nested JSON data.
-Include 2 plugins-

Github Stars  
Forks  
View on Github

.renderizeMenu(data[, settings])

Description: renderizeMenu jQuery plugin helps you dynamically generate multi-level menu lists from nested JSON data.

.renderizeMenu(data[, settings])

data
Type: Array
Nested array.

settings
Type: Plain Object
A set of key/value pairs that configure the renderized menu. All settings are optional.

rootClass
Type: string
Css class for <ul> (The Menu Bar/Menu Level = 0)

itemClass
Type: string
Css class for <li> tag

linkClass
Type: string
Css class for <a> tag

itemHasMenuClass
Type: string
Css class for <li> tag (root for menu Level = 1)

linkHasMenuClass
Type: string
Css class for <a> tag (root for menu Level = 1)

menuClass
Type: string
Css class for <ul> tag

menuItemClass
Type: string
Css class for <li> (Menu Items Level = 1)

menuLinkClass
Type: string
Css class for <a> (Menu Items Level = 1)

menuItemHasSubmenuClass
Type: string
Css class for <li> (root for menus Level > 1)

menuLinkHasSubmenuClass
Type: string
Css class for <a> (root for menus Level > 1)

submenuClass
Type: string
Css class for <ul> tag (menus Level > 1)

active (Default: window.location.href)
Type: string
Current URL.

dropdownIcon
Type: string
Html code for dropdown icon

Demo (Bootstrap 4)

Bootstrap 4 dos'nt support multilevel menu, so let's use Smartmenus plugin.

Add the CSS files

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<link rel="stylesheet" href="smartmenus/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css">

Add the Javascript files

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="renderMenu.js"></script>
<script type="text/javascript" src="smartmenus/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="smartmenus/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>

Add an empty unorder list element.

<ul id="mymenu"></ul>

Use the plugin to renderize the menu and then use your favorite plugin to decorate.

// Data input
var data = [/* Nested Array */];
// Renderize the Menu
$('#mymenu').renderizeMenu(data, {
    rootClass: "nav navbar-nav mr-auto",
    itemClass: 'nav-item',
    linkClass: 'nav-link',
    itemHasMenuClass: "nav-item dropdown",
    linkHasMenuClass: "nav-link dropdown-toggle",
    menuClass: "dropdown-menu",
    menuLinkClass: "dropdown-item",
    menuItemHasSubmenuClass: "dropdown",
    menuLinkHasSubmenuClass: "dropdown-item dropdown-toggle",
    submenuClass: "dropdown-menu",
});
// Apply your favorite plugin
jQuery.SmartMenus.Bootstrap.init();