Skip to content
MetisMenu with Vanilla-JS
Branch: master
Clone or download
Latest commit 48c8601 Oct 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jul 12, 2018
dist fixed clickable horizontal menu Oct 9, 2018
docs update doc Oct 18, 2018
scss fix umd name Sep 9, 2018
src v1.0.2 Sep 6, 2018
.browserslistrc add .browserslistrc Jul 31, 2018
.gitignore Initial commit Jul 12, 2018
.travis.yml v1.0.0 Jul 22, 2018
.verb.md update doc Oct 18, 2018
.versions v1.0.0 Jul 22, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jul 12, 2018
LICENSE Initial commit Jul 12, 2018
README.md update doc Oct 18, 2018
composer.json v1.0.0 Jul 22, 2018
package.js update version Sep 6, 2018
package.json fixed clickable horizontal menu Oct 9, 2018
postcss.config.js v1.0.0 Jul 22, 2018
rollup.config.js fix umd name Sep 9, 2018
tsconfig.json fix umd name Sep 9, 2018
tslint.json v1.0.0 Jul 22, 2018

README.md

metismenujs NPM version NPM monthly downloads NPM total downloads

Packagist

MetisMenu with Vanilla-JS

MetisMenu with JQuery

If you want to try MetisMenu with jQuery, see MetisMenu repository.

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

(TOC generated by verb using markdown-toc)

Getting started

Install

Install with npm:

$ npm install metismenujs

Install with yarn:

$ yarn add metismenujs

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="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="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");

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

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 © 2018, Osman Nuri Okumus. Released under the MIT License.


This file was generated by verb-generate-readme, v0.8.0, on October 18, 2018.

You can’t perform that action at this time.