metisMenu

A jQuery menu plugin

Installation

• npm

npm install metismenu

• Bower

bower install metisMenu

• composer

composer require onokumus/metismenu:dev-master

• Download

Usage

1. Include metisMenu StyleSheet

   html <link rel="stylesheet" href="https://github.com/onokumus/metismenu/raw/v2.4.2/cdnjs.cloudflare.com/ajax/libs/metisMenu/2.4.1/metisMenu.min.css"> OR html <link rel="stylesheet" href="https://github.com/onokumus/metismenu/raw/v2.4.2/cdn.jsdelivr.net/jquery.metismenu/2.4.1/metisMenu.min.css">

2. Include jQuery

   html <script src="https://github.com/onokumus/metismenu/raw/v2.4.2/cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> OR html <script src="https://github.com/onokumus/metismenu/raw/v2.4.2/cdn.jsdelivr.net/jquery/2.2.1/jquery.min.js"></script>

3. Include metisMenu plugin's code

   html <script src="https://github.com/onokumus/metismenu/raw/v2.4.2/cdnjs.cloudflare.com/ajax/libs/metisMenu/2.4.1/metisMenu.min.js"></script> OR html <script src="https://github.com/onokumus/metismenu/raw/v2.4.2/cdn.jsdelivr.net/jquery.metismenu/2.4.1/metisMenu.min.js"></script>

4. Add class metismenu to unordered list

   ```html

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

```html

• Menu 1
  ...
• Menu 2
  ...
...

```

1. Call the plugin:

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

Options

toggle

Type: Boolean Default: true

For auto collapse support.

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

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'
  });

doubleTapToGo

Type: Boolean Default: false

For double tap support.

  $("#menu").metisMenu({
    doubleTapToGo: true
  });

preventDefault

Type: Boolean Default: true

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

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

Events

onTransitionStart

onTransitionEnd

  $("#nav").metisMenu({
    onTransitionStart: function(submenu) {
      // the animation on an element begins
      console.log($(submenu).attr("aria-expanded") === "false" ? "show" : "hide");
    },
    onTransitionEnd: function(submenu) {
      // the animation on an element is complete
      console.log($(submenu).attr("aria-expanded") === "false" ? "shown" : "hidden");
    }
  });

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>

Testing

npm install
bower install
grunt serve

TypeScript type definitions

Install TSD globally using npm:

$ npm install tsd -g

Install metismenu TypeScript definition file

$ tsd install metismenu

DEMO

Contains a simple HTML file to demonstrate metisMenu plugin.

Release History

DATE	VERSION	CHANGES
2016-03-03	v2.4.1	Transition element passed to methods
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

metisMenu was made with love by these guys and a bunch of awesome contributors.

| --- | --- | --- | --- | --- | --- | --- Osman Nuri Okumuş |

License

MIT License

---

:coffee: Buy Me A Coffee