2017 © Pedro Peláez
 

library metismenujs

A menu plugin

image

onokumus/metismenujs

A menu plugin

  • Tuesday, July 24, 2018
  • by onokumus
  • Repository
  • 1 Watchers
  • 1 Stars
  • 0 Installations
  • TypeScript
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 0 Open issues
  • 2 Versions
  • 0 % Grown

The README.md

metismenujs

Collapsible menu plugin with Vanilla-JS, (*1)

[![npm version](https://img.shields.io/npm/v/metismenujs.svg?style=flat-square)](https://www.npmjs.org/package/metismenujs) [![install size](https://img.shields.io/badge/dynamic/json?url=https://packagephobia.com/v2/api.json?p=metismenujs&query=$.install.pretty&label=install%20size&style=flat-square)](https://packagephobia.now.sh/result?p=metismenujs) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/metismenujs?style=flat-square)](https://bundlephobia.com/package/metismenujs@latest) [![npm downloads](https://img.shields.io/npm/dm/metismenujs.svg?style=flat-square)](https://npm-stat.com/charts.html?package=metismenujs) [![](https://data.jsdelivr.com/v1/package/npm/metismenujs/badge)](https://www.jsdelivr.com/package/npm/metismenujs) [![Packagist](https://img.shields.io/packagist/v/onokumus/metismenujs.svg)](https://packagist.org/packages/onokumus/metismenujs)

Table of Contents

Browser Support

This plugin does not support any version of IE browser., (*2)

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ ❌

Install

Package Managers

Using npm:, (*3)

npm install metismenujs

Using yarn:, (*4)

yarn add metismenujs

Using pnpm:, (*5)

pnpm add metismenujs

Once the package is installed, you can import the library using import or require approach:, (*6)

// recommended approach
import { MetisMenu } from 'metismenujs';

// You can also use the default export
import MetisMenu from 'metismenujs';

If you use require for importing, only default export is available:, (*7)

const MetisMenu = require('metismenujs');

Note CommonJS usage In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require(), add the following to your tsconfig.json:, (*8)

{
  "compilerOptions": {
    "moduleResolution": "NodeNext"
  }
}

CDN

ES6 UMD browser module

Using jsDelivr CDN:, (*9)

<script src="https://cdn.jsdelivr.net/npm/metismenujs"></script>

Using unpkg CDN:, (*10)

<script src="https://unpkg.com/metismenujs"></script>

ES6 ES module

Using jsDelivr CDN:, (*11)

<script type="module">
  import { MetisMenu } from 'https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.esm.min.js';
</script>

Using unpkg CDN:, (*12)

<script type="module">
  import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js';
</script>

Install with composer, (*13)

composer require onokumus/metismenujs:dev-master

Download

download, (*14)

Ready to use files are located in the dist directory., (*15)

Usage

  1. Include metismenujs StyleSheet, (*16)

    Using CDN

    jsDelivr :, (*17)

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">

    unpkg :, (*18)

    <link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">

    Using Vite, Astro etc.

    import 'metismenujs/style';

    or sass source file, (*19)

    import 'metismenujs/sass';

  2. Add class metismenu to unordered list, (*20)

    ```html, (*21)

``` 3. Make expand/collapse controls accessible, (*22)

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., (*23)

html <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> 4. Arrow Options, (*24)

add has-arrow class to a element, (*25)

html <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>, (*26)

  1. Call the plugin:, (*27)

    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:, (*28)

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

Options

Option Type Default Description Example
toggle Boolean true For auto collapse support. new MetisMenu("#menu", { toggle: false });
triggerElement css selector a new MetisMenu("#menu", { triggerElement: '.nav-link' });
parentTrigger css selector li new MetisMenu("#menu", { parentTrigger: '.nav-item' });
subMenu css selector ul new MetisMenu("#menu", { subMenu: '.nav.flex-column' });

API

dispose

For stop and destroy metisMenu., (*29)

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

update

Re-init metisMenu., (*30)

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

CSS custom properties (variables)

Property Default Description
--mm-transition-timing-function ease This property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
--mm-trantisition-duration 0.35s This property sets the length of time a transition animation should take to complete.

Migrating to v1.0.3 from v1.4.0

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

Examples

https://github.com/metismenu/examples, (*31)

Demo

https://onokumus.github.io/metismenujs, (*32)

Contains a simple HTML file to demonstrate metisMenu plugin., (*33)

About

Contributing

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

Author

Osman Nuri Okumus + GitHub Profile + Twitter Profile + LinkedIn Profile, (*35)

License

Copyright © 2023, Osman Nuri Okumuş. Released under the MIT License., (*36)

The Versions

24/07 2018

dev-master

9999999-dev https://github.com/onokumus/metismenujs

A menu plugin

  Sources   Download

MIT

by Osman Nuri Okumus

plugin css js menu web

22/07 2018

v1.0.0

1.0.0.0 https://github.com/onokumus/metismenujs

A menu plugin

  Sources   Download

MIT

by Osman Nuri Okumus

plugin css js menu web