jQuery Accordion Menu Plugin For Bootstrap 3 metisMenu - Free Download jQuery Accordion Menu Plugin For Bootstrap 4/3 - metisMenu

Free Download jQuery Accordion Menu Plugin For Bootstrap 4/3 – metisMenu

Posted on

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.

jQuery Accordion Menu Plugin For Bootstrap 3 metisMenu - Free Download jQuery Accordion Menu Plugin For Bootstrap 4/3 - metisMenu
File Size: 153 KB
Views Total: 114778
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

1 # Yarn
2 $ yarn add metismenu
3  
4 # NPM
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.

01 <ul id="menu">
02   <li class="active">
03     <a href="#" class="has-arrow" aria-expanded="true">Menu 0</a>
04     <ul>
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>
08     </ul>
09   </li>
10   <li>
11     <a href="#" class="has-arrow" aria-expanded="false">Menu 1</a>
12     <ul>
13       <li><a href="#">item 1.1</a></li>
14       <li><a href="#">item 1.2</a></li>
15       <li>
16         <a href="#" class="has-arrow" aria-expanded="false">Menu 1.3</a>
17         <ul>
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>
21         </ul>
22       </li>
23       <li><a href="#">item 1.4</a></li>
24       <li>
25         <a href="#" class="has-arrow" aria-expanded="false">Menu 1.5</a>
26         <ul>
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>
30         </ul>
31       </li>
32     </ul>
33   </li>
34   <li>
35     <a href="#" class="has-arrow" aria-expanded="false">Menu 2</a>
36     <ul>
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>
40     </ul>
41   </li>
42 </ul>

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.

1 $(function () {
2   $('#menu').metisMenu();
3 });

6. All default settings to customize the menu.

01 $('#menu').metisMenu({
02  
03   // enabled/disable the auto collapse.
04   toggle: true,
05  
06   // prevent default event
07   preventDefault: true,
08