jQuery Menu from JSON

jQuery Plugins for create multilevel menus and nested select From a JSON String

Plugins

• .renderizeMenu
• .nestedSelect

Requirements

• jQuery >= 1.10

Usage

<script src="jquery.min.js"></script>
<script type="text/javascript" src="renderMenu.js"></script>

.renderizeMenu(data[, options])

Create an unorder list with the id attribute

    <ul id="myMenu"></ul>

Renderize the menu from a json string or array

var items = [ { "href": "#1", "text": "Products", "icon": "fa fa-book", "children": [ { "href": "//github.com", "text": "Books", "children": [ { "href": "#", "text": "Jquery" }, { "href": "codeigniter.com", "text": "Codeigniter" }, { "href": "#", "text": "Wordpress" } ] }, { "href": "#", "text": "Software" } ] }, { "href": "sites.com", "text": "Sites", "children": [ { "href": "//codeignitertutoriales.com", "text": "My Blog" }, { "href": "#", "text": "GitHub" } ] } ];
var $menu = $('#myMenu').renderizeMenu(items);

Setting the options and use it with another plugin.

.nestedSelect(data[, options])

Create a select with the id attribute

<select id="mySelect" name="mySelect"></select>

Renderize the select from a json string or array

var items = [{ "value": "//github.com/davicotico", "text": "First item"}, { "value": "#1", "text": "Products", "children": [ { "value": "//github.com", "text": "Books", "children": [ { "value": "#", "text": "Jquery" }, { "value": "#", "text": "Codeigniter" }, { "value": "#", "text": "Wordpress" } ] }, { "value": "#", "text": "Software" } ] }, { "value": "#", "text": "Sites", "children": [ { "value": "//codeignitertutoriales.com", "text": "My Blog" }, { "value": "#", "text": "GitHub" } ] }, { "value": "//github.com/davicotico", "text": "Last item"} ];
var $select = $('#mySelect').nestedSelect(items, {title: '-Select an Option-'});
$select.change(function () {
    alert($(this).val());
});