Negligent Parachute Maintainers
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    metismenupublic

    metismenu NPM version NPM monthly downloads NPM total downloads Linux Build Status Packagist

    A jQuery menu plugin

    Table of Contents

    (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 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.4/metisMenu.min.css">
    <!-- OR -->  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
    1. 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>
    1. Include metisMenu plugin's code
    <script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.4/metisMenu.min.js"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
    1. Add class metismenu to unordered list
    <ul class="metismenu" id="menu">
     
    </ul>
    1. 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>
    1. 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>
    1. 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).

    Demo

    http://mm.onokumus.com

    Contains a simple HTML file to demonstrate metisMenu plugin.

    About

    Related projects

    Contributors

    Commits Contributor
    132 onokumus
    8 diegozhu
    4 sinabs
    3 BurkovBA
    2 arthurtalkgoal
    2 PeterDaveHello
    2 kalidema
    2 AndrewEastwood
    2 rgnevashev
    1 719media
    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.4 jQuery -> $ in src/metisMenu.js to fix import. #158
    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

    License

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


    This file was generated by verb-generate-readme, v0.6.0, on March 07, 2018.

    install

    npm i metismenu

    Downloadslast 7 days

    9,705

    version

    2.7.5

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar