This time I will share jQuery Plugin and tutorial about Dynamic Menu List Generator With jQuery And JSON – renderMenu.js, hope it will help you in programming stack.
| File Size: | 100 KB |
|---|---|
| Views Total: | 15367 |
| 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 Menus, metisMenu, and more.
More Features:
How to use it:
1. Include the rederMenu.js jQuery plugin after the latest version of jQuery JavaScript library.
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="renderMenu.js"></script> |
2. Create nested JSON strings for the multi-level menu list.
01 |
[ |
02 |
{ |
03 |
"href":"#", |
04 |
"text":"Products", |
05 |
"icon":"fa fa-book", |
06 |
"children":[ |
07 |
{ |
08 |
"href":"#", |
09 |
"text":"Books", |
10 |
"children":[ |
11 |
{ |
12 |
"href":"#", |
13 |
"text":"Jquery" |
14 |
}, |
15 |
{ |
16 |
"href":"#", |
17 |
"text":"Codeigniter" |
18 |
}, |
19 |
{ |
20 |
"href":"#", |
21 |
"text":"Wordpress" |
22 |
} |
23 |
] |
24 |
}, |
25 |
{ |
26 |
"href":"#", |
27 |
"text":"Software" |
28 |
} |
29 |
] |
30 |
}, |
31 |
{ |
32 |
"href":"#", |
33 |
"text":"Sites", |
34 |
"children":[ |
35 |
{ |
36 |
"href":"#", |
37 |
"text":"My Blog" |
38 |
}, |
39 |
{ |
40 |
"href":"#", |
41 |
"text":"GitHub" |
42 |
} |
43 |
] |
44 |
} |
45 |
] |
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
1 |
$.menuList({ |
2 |
data: null, |
3 |
active: window.location.href, |
4 |
ulParentClass: '', |
5 |
aParentClass: '', |
6 |
dropdownIcon: null |
7 |
}); |
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.
source : jquery.net
