Novel Preposterous Mockery

    metismenujs
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    metismenujs NPM version NPM monthly downloads NPM total downloads

    Packagist

    MetisMenu: Collapsible menu plugin with Vanilla-JS

    This plugin does not support any version of IE browser.

    Please consider following this project's author, Osman Nuri Okumus, and consider starring the project to show your ❤️ and support.

    Getting started

    Install

    Install with npm:

    $ npm install metismenujs

    Install with yarn:

    $ yarn add metismenujs

    Add project file to metismenu

    import MetisMenu from 'metismenujs';
    
    // or
    const MetisMenu = require('metismenujs');
    
    // create new instance
    const mm = new MetisMenu('#menu', {...});
    
    // or call MetisMenu static attach method
    const mm = MetisMenu.attach('#menu', {...})

    Install with composer

    $ composer require onokumus/metismenujs:dev-master

    Download

    download

    Usage

    1. Include metismenujs StyleSheet
    <link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">
    <!-- OR -->  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">
    1. Include metismenujs plugin's code
    <script src="https://unpkg.com/metismenujs/dist/metismenujs.min.js"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.js"></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. 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="mm-active">
        <a href="#" aria-expanded="true">Menu 1</a>
        <ul>
        ...
        </ul>
      </li>
      <li>
        <a href="#" aria-expanded="false">Menu 2</a>
        <ul>
        ...
        </ul>
      </li>
      ...
      </ul>
    1. Arrow Options

    add has-arrow class to a element

    <ul class="metismenu" id="menu">
    <li class="mm-active">
      <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
      <ul>
      ...
      </ul>
    </li>
    <li>
      <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
      <ul>
      ...
      </ul>
    </li>
    ...
    </ul>
    1. Call the plugin:
      new MetisMenu("#menu");
      // or
      MetisMenu.attach('#menu');

    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.

     new MetisMenu("#menu", {
       toggle: false
     });

    triggerElement

    Type: css selector Default: a

     new MetisMenu("#menu", {
       triggerElement: '.nav-link' // bootstrap 4
     });

    parentTrigger

    Type: css selector Default: li

     new MetisMenu("#menu", {
       parentTrigger: '.nav-item' // bootstrap 4
     });

    subMenu

    Type: css selector Default: ul

     new MetisMenu("#menu", {
       subMenu: '.nav.flex-column' // bootstrap 4
     });

    API

    dispose

    For stop and destroy metisMenu.

     const mm = new MetisMenu("#menu");
     mm.dispose();

    update

    Re-init metisMenu.

     const mm = new MetisMenu("#menu");
     mm.dispose();
     // ajax ...
     mm.update();

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

    Migrating to v1.0.3 from v1.2.0

    • Update metisMenu.js & metisMenu.css files
    • Change active class to mm-active

    Demo

    https://onokumus.com/metismenujs

    Contains a simple HTML file to demonstrate metisMenu plugin.

    About

    Related projects

    Contributing

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

    Author

    Osman Nuri Okumus

    License

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

    Install

    npm i metismenujs

    DownloadsWeekly Downloads

    14,941

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    24

    Last publish

    Collaborators

    • onokumus