jQuery Accordion Menu Plugin For Bootstrap - metisMenu

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

See also:

Installation:

# Yarn
$ yarn add metismenu
# NPM
$ npm install metismenu --save

How to use it:

1. Include the Bootstrap 3 framework on your web page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

2. Include Font Awesome for the control buttons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

3. Create an accordion menu using nested lists.

<ul id="menu">
<li class="active"> <a href="#">Menu 0 <span class="fa arrow"></span></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>
<li><a href="#">item 0.4</a></li>
</ul>
</li>
<li> <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
<ul>
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li> <a href="#">Menu 1.3 <span class="fa plus-times"></span></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>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
<li> <a href="#">Menu 1.5 <span class="fa plus-minus"></span></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>
<li><a href="#">item 1.5.4</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Menu 2 <span class="glyphicon arrow"></span></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>
<li><a href="#">item 2.4</a></li>
</ul>
</li>
</ul>

4. Add the following styles in your CSS to style the controls.

<style>
.arrow {
float: right;
}
.glyphicon.arrow:before {
content: "\e079";
}
.active > a > .glyphicon.arrow:before {
content: "\e114";
}
.fa.arrow:before {
content: "\f104";
}
.active > a > .fa.arrow:before {
content: "\f107";
}
.plus-times {
float: right;
}
.fa.plus-times:before {
content: "\f067";
}
.active > a > .fa.plus-times {
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.plus-minus {
float: right;
}
.fa.plus-minus:before {
content: "\f067";
}
.active > a > .fa.plus-minus:before {
content: "\f068";
}
</style>

5. Include the jQuery library and jQuery metisMenu plugin on the page, and then call the plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.metisMenu.js"></script> 
<script>
$(function () {
$('#menu').metisMenu({
toggle: false // disable the auto collapse. Default: true.
});
});
</script>

6. Default settings.

$('#menu').metisMenu({
  // auto collapse. 
  toggle: true,
  // prevents or allows dropdowns' onclick events after expanding/collapsing.
  preventDefault: true,
  // CSS classes
  activeClass: 'active',
  collapseClass: 'collapse',
  collapseInClass: 'in',
  collapsingClass: 'collapsing',
  triggerElement: 'a',
  parentTrigger: 'li',
  subMenu: 'ul'
  // callbacks
  onTransitionStart: false,
  onTransitionEnd: false
});

7. Events.

• 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).

Change logs:

v2.7.6 (2018-04-22)

• fixed scrollHeight

v2.7.4 (2018-02-17)

• jQuery -> $ in src/metisMenu.js to fix import.

v2.7.3 (2018-02-15)

• window might not be defined in node.js environment

v2.7.2 (2017-12-31)

• isolate against bootstrap changes, remove old legacy ie9 code

v2.7.1 (2017-10-31)

• added check in complete()-callback to break when menu was disposed

v2.7.0 (2017-03-09)

• Fixed has-arrow class border color & added new 3 options

v2.6.3 (2017-02-24)

• Fixed transitionEndEmulator method doesn't work.

v2.6.2 (2017-02-02)

• deprecated doubleTapToGo option
• fix require.js is 

v2.6.0 (2016-11-29)

v2.5.2 (2016-05-07)

• fix Menu failed to remove collapsing class

v2.5.0 (2016-03-31)

• Events support

v2.4.3 (2016-03-12)

• update

v2.4.1 (2016-03-04)

• Transition element passed to methods

v2.4.0 (2016-01-26)

• Support AMD / Node / CommonJS

v2.3.0 (2015-09-28)

•   Disable list expansion if aria-disabled is true on link element

v2.2.0 (2015-09-28)

• Events supported & added preventDefault options

v2.1.0 (2015-08-07)

• RTL & aria-expanded attribute & TypeScript type definitions support

v2.0.3 (2015-07-26)

• add possibility to modify collapase, in and collapsing default classes
• Fixed: When the active item has doubleTapToGo should not collapse

v2.0.1 (2015-05-22)

• changeable classname support 
• bug fixed

v2.0.0 (2015-04-04)

• remove Bootstrap dependency.

2014-11-02

• v1.1.3

2014-07-08

• v1.1.0

2014-06-10

• Fixed for IE8 & IE9

2014-03-11

• NEW version.

This awesome jQuery plugin is developed by onokumus. For more Advanced Usages, please check the demo page or visit the official website.