A jQuery menu plugin

• npm

npm install metismenu

• Bower

bower install metisMenu

• composer

composer require onokumus/metismenu:dev-master

• Download

1. Include metisMenu StyleSheet

   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.css">

   OR

   <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.metismenu/2.2.0/metisMenu.min.css">

2. Include jQuery

   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

   OR

   <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>

3. Include metisMenu plugin's code

   <script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.2.0/metisMenu.min.js"></script>

   OR

   <script src="//cdn.jsdelivr.net/jquery.metismenu/2.2.0/metisMenu.min.js"></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. Call the plugin:

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

Type: Boolean Default: true

For auto collapse support.

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

Type: String Default: active

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

Type: String Default: collapse

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

Type: String Default: in

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

Type: String Default: collapsing

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

Type: Boolean Default: false

For double tap support.

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

Type: Boolean Default: true

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

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

  $('#menu').metisMenu({
    onTransitionStart: function(){
      console.log('onTransitionStart');
    },
    onTransitionEnd: function(){
      console.log('onTransitionEnd');
    }
  });

npm install
bower install
grunt serve

Install TSD globally using npm:

$ npm install tsd -g

Install metismenu TypeScript definition file

$ tsd install metismenu

Contains a simple HTML file to demonstrate metisMenu plugin.

DATE VERSION CHANGES

• 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

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

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

MIT License