jQuery Accordion Menu Plugin For Bootstrap 3 - metisMenu

jQuery Accordion Menu Plugin For Bootstrap 3 - metisMenu
File Size: 142 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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