Dynamic Menu List Generator With jQuery And JSON - renderMenu.js

The renderMenu.js jQuery plugin helps you dynamically generate multi-level menu lists from nested JSON data. Compatible with most menu enhancement plugin such as Smart Menus, metisMenu, and more.

More Features:

• Basic
• With Smart Menus
• With metisMenu

How to use it:

1. Include the rederMenu.js jQuery plugin after the latest version of jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="renderMenu.js"></script>

2. Create nested JSON strings for the multi-level menu list.

[  
 {  
    "href":"#",
    "text":"Products",
    "icon":"fa fa-book",
    "children":[  
       {  
          "href":"#",
          "text":"Books",
          "children":[  
             {  
                "href":"#",
                "text":"Jquery"
             },
             {  
                "href":"#",
                "text":"Codeigniter"
             },
             {  
                "href":"#",
                "text":"Wordpress"
             }
          ]
       },
       {  
          "href":"#",
          "text":"Software"
       }
    ]
 },
 {  
    "href":"#",
    "text":"Sites",
    "children":[  
       {  
          "href":"#",
          "text":"My Blog"
       },
       {  
          "href":"#",
          "text":"GitHub"
       }
    ]
 }
]

3. Generate a menu list with the following parameters:

• data: Json String
• active: window.location.href  Current URL
• activeClass: active class
• ulParentClass: Css Class for ul tag (with submenu)
• aParentClass: Css Class for a tag (with submenu)
• dropdownIcon: Html code for dropdown icon

$.menuList({
  data: null,
  active: window.location.href,
  ulParentClass: '',
  aParentClass: '',
  dropdownIcon: null
});

Changelog:

2018-11-14

• Add settings: activeClass

2018-11-12

• Optimize the plugin

2018-02-08

• use var instead let (browser compatibility)

---

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