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

Dynamic Menu List Generator With jQuery And JSON - renderMenu.js
File Size: 8.05 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 MenusmetisMenu, and more.

More Features:

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
  • 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
});

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