metisMenu is a simple jQuery menu plugin for Bootstrap 4 or 3 that helps you create a collapsible menu with accordion animated effects and auto-collapse support.
3 level accordion menu bootstrap, bootstrap accordion menu with submenu, jquery accordion menu with submenu, jquery vertical accordion menu
How to make use of it:
Installation:
# Yarn $ yarn add metismenu # NPM $ npm install metismenu --save
1. Include the Bootstrap 4 or 3 framework in your internet web page.
<link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script>
2. Include Font Awesome for the control buttons.
<link href="font-awesome.css" rel="stylesheet">
3. Create an accordion menu using nested lists.
<ul id="menu">
<li class="active">
<a href="#" class="has-arrow" aria-expanded="true">Menu 0</a>
<ul>
<li><a href="#">item 0.1</a></li>
<li><a href="#">item 0.2</a></li>
<li><a href="#">item 0.3</a></li>
</ul>
</li>
<li>
<a href="#" class="has-arrow" aria-expanded="false">Menu 1</a>
<ul>
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li>
<a href="#" class="has-arrow" aria-expanded="false">Menu 1.3</a>
<ul>
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
<li>
<a href="#" class="has-arrow" aria-expanded="false">Menu 1.5</a>
<ul>
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="has-arrow" aria-expanded="false">Menu 2</a>
<ul>
<li><a href="#">item 2.1</a></li>
<li><a href="#">item 2.2</a></li>
<li><a href="#">item 2.3</a></li>
</ul>
</li>
</ul>4. Include the jQuery library and the jQuery metisMenu plugin’s information on the web page.
<link rel="stylesheet" href="/dist/metisMenu.min.css"> <script src="jquery.min.js"></script> <script src="/dist/jquery.metisMenu.js"></script>
5. Call the plugin and executed it.
$(function () {
$('#menu').metisMenu();
});6. All default settings to customize the menu.
$('#menu').metisMenu({
// enabled/disable the auto collapse.
toggle: true,
// prevent default event
preventDefault: true,
// default classes
activeClass: 'active',
collapseClass: 'collapse',
collapseInClass: 'in',
collapsingClass: 'collapsing',
// .nav-link for Bootstrap 4
triggerElement: 'a',
// .nav-item for Bootstrap 4
parentTrigger: 'li',
// .nav.flex-column for Bootstrap 4
subMenu: 'ul'
});Events
| Event Type | Description |
|---|---|
| show.metisMenu | This event fires immediately when the _show instance method is called. |
| shown.metisMenu | This event is fired when a collapse ul element has been made visible to the user (will wait for CSS transitions to complete). |
| hide.metisMenu | This event is fired immediately when the _hide method has been called. |
| hidden.metisMenu | This event is fired when a collapse ul element has been hidden from the user (will wait for CSS transitions to complete). |
jQuery Accordion Menu Plugin For Bootstrap, metismenu Plugin/Github, simple jquery accordion menu, metismenu cdn, jquery vertical menu expand collapse
See Demo And Download
Official Website(onokumus): Click Here
This superior jQuery/javascript plugin is developed by onokumus. For extra Advanced Usage, please go to the official website.
