metismenu

A jQuery menu plugin

Table of Contents

• Getting started
  • Install
  • Download
• Usage
  • Stopping list opening on certain elements
• Options
  • toggle
  • dispose
  • activeClass
  • collapseClass
  • collapseInClass
  • collapsingClass
  • preventDefault
  • triggerElement
  • parentTrigger
  • subMenu
• Events
• Testing
• Demo
• About
  • Related projects
  • Contributors
  • Contributing
  • Release History
  • Author
  • License

(TOC generated by verb using markdown-toc)

Getting started

Install

Install with npm:

$ npm install --save metismenu

Install with yarn:

$ yarn add metismenu

Install with bower

$ bower install metismenu --save

Install with composer

$ composer require onokumus/metismenu:dev-master

Download

download

Usage

1. Include metismenu StyleSheet

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.3/metisMenu.min.css">
<!-- OR -->  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">

2. Include jQuery

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>

3. Include metisMenu plugin's code

<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.3/metisMenu.min.js"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>

4. Add class metismenu to unordered list

<ul class="metismenu" id="menu">

</ul>

5. Make expand/collapse controls accessible

Be sure to add aria-expanded to the element a and the following ul. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element's parent li element to be open by default using the active class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

<ul class="metismenu" id="menu">
  <li class="active">
    <a href="#" aria-expanded="true">Menu 1</a>
    <ul aria-expanded="true">
    ...
    </ul>
  </li>
  <li>
    <a href="#" aria-expanded="false">Menu 2</a>
    <ul aria-expanded="false">
    ...
    </ul>
  </li>
  ...
  </ul>

6. Arrow Options

add has-arrow class to a element

<ul class="metismenu" id="menu">
<li class="active">
  <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
  <ul aria-expanded="true">
  ...
  </ul>
</li>
<li>
  <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
  <ul aria-expanded="false">
  ...
  </ul>
</li>
...
</ul>

7. Call the plugin:

  $("#menu").metisMenu();

Stopping list opening on certain elements

Setting aria-disabled="true" in the <a> element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:

<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>

Options

toggle

Type: Boolean Default: true

For auto collapse support.

 $("#menu").metisMenu({
   toggle: false
 });

dispose

Type: String Default: null

For stop and destroy metisMenu.

 $("#menu").metisMenu('dispose');

activeClass

Type: String Default: active

 $("#menu").metisMenu({
   activeClass: 'active'
 });

collapseClass

Type: String Default: collapse

 $("#menu").metisMenu({
   collapseClass: 'collapse'
 });

collapseInClass

Type: String Default: in

 $("#menu").metisMenu({
   collapseInClass: 'in'
 });

collapsingClass

Type: String Default: collapsing

 $("#menu").metisMenu({
   collapsingClass: 'collapsing'
 });

preventDefault

Type: Boolean Default: true

Prevents or allows dropdowns' onclick events after expanding/collapsing.

 $("#menu").metisMenu({
   preventDefault: false
 });

since from version 2.7.0

triggerElement

Type: jQuery selector Default: a

 $("#menu").metisMenu({
   triggerElement: '.nav-link' // bootstrap 4
 });

parentTrigger

Type: jQuery selector Default: li

 $("#menu").metisMenu({
   parentTrigger: '.nav-item' // bootstrap 4
 });

subMenu

Type: jQuery selector Default: ul

 $("#menu").metisMenu({
   subMenu: '.nav.flex-column' // bootstrap 4
 });

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

Testing

$ npm install
$ grunt serve

Demo

http://mm.onokumus.com

Contains a simple HTML file to demonstrate metisMenu plugin.

About

Related projects

• chl: flexbox admin layout | homepage
• elektron: An Admin Toolkit | homepage
• onoffcanvas: An offcanvas plugin | homepage
• twbuttons: alexwolfe/Buttons for Twitter Bootstrap 3 | homepage

Contributors

| Commits | Contributor |
| --- | --- |
| 128 | onokumus |
| 8 | diegozhu |
| 4 | sinabs |
| 2 | arthurtalkgoal |
| 2 | PeterDaveHello |
| 2 | kalidema |
| 2 | AndrewEastwood |
| 2 | rgnevashev |
| 1 | 719media |
| 1 | BurkovBA |
| 1 | chriswiggins |
| 1 | jmagnusson |
| 1 | LukasDrgon |
| 1 | Cediddi |
| 1 | capynet |

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Please read the contributing guide for advice on opening issues, pull requests, and coding standards.

Release History

|DATE |VERSION |CHANGES| |--------------|--------------|-----------| |2018-02-14 |v2.7.3 |window might not be defined in node.js environment #156| |2017-12-31 |v2.7.2 |isolate against bootstrap changes, remove old legacy ie9 code #154| |2017-10-30 |v2.7.1 |added check in complete()-callback to break when menu was disposed #150| |2017-03-08 |v2.7.0 |fixed has-arrow class border color & added new 3 options| |2017-02-23 |v2.6.3 |fixed #129| |2017-02-02 |v2.6.2 |doubleTapToGo option is deprecated| |2016-12-06 |v2.6.1 |fix require.js| |2016-11-29 |v2.6.0 |dispose support| |2016-05-06 |v2.5.2 |fix Menu failed to remove collapsing class| |2016-05-06 |v2.5.1 |fixed bootstrap conflict| |2016-03-31 |v2.5.0 |Event support| |2016-03-11 |v2.4.3 |create meteor package| |2016-03-04 |v2.4.2 |back to version 2.4.0| |2016-03-03 |v2.4.1 |Transition element passed to methods (removed)| |2016-01-25 |v2.4.0 |Support AMD / Node / CommonJS| |2016-01-08 |v2.3.0 |Adding aria-disabled=true to the link element prevents the dropdown from opening| |2015-09-27 |v2.2.0 |Events supported & added preventDefault options| |2015-08-06 |v2.1.0 |RTL & aria-expanded attribute & TypeScript type definitions support| |2015-07-25 |v2.0.3 |When the active item has doubleTapToGo should not collapse| |2015-05-23 |v2.0.2 |fixed| |2015-05-22 |v2.0.1 |changeable classname support| |2015-04-03 |v2.0.0 |Remove Bootstrap dependency| |2015-03-24 |v1.1.3 |composer support| |2014-11-01 |v1.1.3 |Bootstrap 3.3.0| |2014-07-07 |v1.1.0 |Add double tap functionality| |2014-06-24 |v1.0.3 |cdnjs support & rename plugin| |2014-06-18 |v1.0.3 |Create grunt task| |2014-06-10 |v1.0.2 |Fixed for IE8 & IE9|

Author

Osman Nuri Okumus

• github/onokumus
• twitter/onokumus

License

Copyright © 2018, Osman Nuri Okumus. Released under the MIT License.

This file was generated by verb-generate-readme, v0.6.0, on February 15, 2018.