This time I will share jQuery Plugin and tutorial about Dynamic JSON Accordion Menu For Bootstrap – jQuery JSONmenu, hope it will help you in programming stack.
A JSON based menu builder plugin that enables developers to dynamically creates an accordion-style vertical menu using jQuery and Bootstrap 4 list component.
How to use it:
1. The JSON Menu plugin requires jQuery library and Bootstrap 4 framework to work.
1 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
2. Create a basic accordion menu from a JavaScript array of objects as follows:
01 |
$("#myMenu").jsonMenu("set", { |
03 |
header:"<strong>Header</strong>", |
07 |
header:"Aanother header", |
09 |
footer:"<hr/> Menu Body Here", |
3. It also works with JSON data by using the JSON.parse() and JSON.stringify() methods.
4. Add header & footer to the accordion menu.
01 |
$("#myMenu").jsonMenu("set", { |
02 |
header: 'Header Here', |
04 |
header:"<strong>Header</strong>", |
08 |
header:"Aanother header", |
10 |
footer:"<hr/> Menu Body Here", |
5. Add new items to the accordion menu.
01 |
$("#myMenu").jsonMenu("add", { |
02 |
header: 'New Header Here', |
04 |
header:"<strong>Header</strong>", |
08 |
header:"Aanother header", |
10 |
footer:"<hr/> Menu Body Here", |
13 |
footer:"New Footer Here" |
6. Show & hide the menu items manually.
1 |
$("#myMenu").jsonMenu("show"); |
2 |
$("#myMenu").jsonMenu("hide"); |
7. Remove & clear the menu items manually.
1 |
$("#myMenu").jsonMenu("remove"); |
2 |
$("#myMenu").jsonMenu("clear"); |
