
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.
- Publication date: 22.04.2018
- Source