metisMenu

   

A jQuery menu plugin

• 1. TOC
• [Installation](#installation)
  • [Download](#download)
  • [React](#react)
  • [TypeScript type definitions](#typescript-type-definitions)
• [Usage](#usage)
  • [Stopping list opening on certain elements](#stopping-list-opening-on-certain-elements)
• [Options](#options) + [toggle](#toggle) + [activeClass](#activeclass) + [collapseClass](#collapseclass) + [collapseInClass](#collapseinclass) + [collapsingClass](#collapsingclass) + [doubleTapToGo](#doubletaptogo) + [preventDefault](#preventdefault)
• [Events](#events)
• [Testing](#testing)
• [Demo](#demo)
• [Release History](#release-history)
• [Author](#author)
• [License](#license)

_(TOC generated by verb using markdown-toc)_

Installation

Install with npm:

sh
$ npm install metismenu

Install with bower

sh
$ bower install metisMenu

Install with composer

sh
$ composer require onokumus/metismenu:dev-master

Download

download

React

See react-metismenu

TypeScript type definitions

Install TSD globally using npm:

bash
$ npm install tsd -g

Install metismenu TypeScript definition file

bash
$ tsd install metismenu

Usage

1. Include metisMenu StyleSheet
   
   `html <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css"> ` OR
   
   `html <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.metisMenu/2.5.2/metisMenu.min.css"> `

2. Include jQuery
   
   `html <script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> ` OR `html <script src="cdn.jsdelivr.net/jquery/2.2.1/jquery.min.js"></script> `

3. Include metisMenu plugin's code
   
   `html <script src="cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script> ` OR `html <script src="cdn.jsdelivr.net/jquery.metisMenu/2.5.2/metisMenu.min.js"></script> `

4. Add class metisMenu to unordered list
   
   `html <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.
   
   `html <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. Call the plugin:
   
   `javascript $("#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:

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

Options

toggle

Type: Boolean Default: true

For auto collapse support.

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

activeClass

Type: String Default: active

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

collapseClass

Type: String Default: collapse

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

collapseInClass

Type: String Default: in

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

collapsingClass

Type: String Default: collapsing

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

doubleTapToGo

Type: Boolean Default: false

For double tap support.

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

preventDefault

Type: Boolean Default: true

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

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

Events

Testing

sh
$ npm install
$ bower install
$ grunt serve

Demo

http://mm.onokumus.com

Contains a simple HTML file to demonstrate metisMenu plugin.

Release History

Author

Osman Nuri Okumuş

+ github/onokumus + twitter/onokumus

License

Copyright © 2016, Osman Nuri Okumuş.ş Released under the MIT license.

:coffee: Buy Me A Coffee

_This file was generated by verb, v0.9.0, on May 06, 2016._