This time I will share jQuery Plugin and tutorial about jQuery Accordion Menu Plugin For Bootstrap 4/3 – metisMenu, hope it will help you in programming stack.
metisMenu is a simple jQuery menu plugin for Bootstrap 4 and Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.
The vanilla JavaScript version is available now.
Installation:
5 |
$ npm install metismenu --save |
How to use it:
1. Include the Bootstrap 4 or Bootstrap 3 framework on your web page.
1 |
< link rel = "stylesheet" href = "bootstrap.min.css" > |
2 |
< script src = "bootstrap.min.js" ></ script > |
2. Include Font Awesome for the control buttons.
1 |
< link href = "font-awesome.css" rel = "stylesheet" > |
3. Create an accordion menu using nested lists.
03 |
< a href = "#" class = "has-arrow" aria-expanded = "true" >Menu 0</ a > |
05 |
< li >< a href = "#" >item 0.1</ a ></ li > |
06 |
< li >< a href = "#" >item 0.2</ a ></ li > |
07 |
< li >< a href = "#" >item 0.3</ a ></ li > |
11 |
< a href = "#" class = "has-arrow" aria-expanded = "false" >Menu 1</ a > |
13 |
< li >< a href = "#" >item 1.1</ a ></ li > |
14 |
< li >< a href = "#" >item 1.2</ a ></ li > |
16 |
< a href = "#" class = "has-arrow" aria-expanded = "false" >Menu 1.3</ a > |
18 |
< li >< a href = "#" >item 1.3.1</ a ></ li > |
19 |
< li >< a href = "#" >item 1.3.2</ a ></ li > |
20 |
< li >< a href = "#" >item 1.3.3</ a ></ li > |
23 |
< li >< a href = "#" >item 1.4</ a ></ li > |
25 |
< a href = "#" class = "has-arrow" aria-expanded = "false" >Menu 1.5</ a > |
27 |
< li >< a href = "#" >item 1.5.1</ a ></ li > |
28 |
< li >< a href = "#" >item 1.5.2</ a ></ li > |
29 |
< li >< a href = "#" >item 1.5.3</ a ></ li > |
35 |
< a href = "#" class = "has-arrow" aria-expanded = "false" >Menu 2</ a > |
37 |
< li >< a href = "#" >item 2.1</ a ></ li > |
38 |
< li >< a href = "#" >item 2.2</ a ></ li > |
39 |
< li >< a href = "#" >item 2.3</ a ></ li > |
4. Include jQuery library and the jQuery metisMenu plugin’s files on the page.
1 |
< link rel = "stylesheet" href = "/dist/metisMenu.min.css" > |
2 |
< script src = "jquery.min.js" ></ script > |
3 |
< script src = "/dist/jquery.metisMenu.js" ></ script > |
5. Call the plugin and done.
2 |
$( '#menu' ).metisMenu(); |
6. All default settings to customize the menu.
01 |
$( '#menu' ).metisMenu({ |