onokumus / metismenu
A jQuery menu plugin
Installs: 209 459
Dependents: 6
Suggesters: 0
Security: 0
Stars: 1 961
Watchers: 106
Forks: 487
Language:JavaScript
Suggests
- components/jquery: >=1.9
- dev-master
- v3.0.7
- v3.0.6
- v3.0.5
- v3.0.4
- v3.0.3
- v3.0.2
- v3.0.1
- v3.0.0
- v3.0.0-beta.0
- v3.0.0-alpha.2
- v3.0.0-alpha.1
- v3.0.0-alpha.0
- v2.7.9
- v2.7.8
- v2.7.7
- v2.7.6
- v2.7.5
- v2.7.4
- v2.7.3
- v2.7.2
- v2.7.1
- v2.7.0
- v2.6.3
- v2.6.2
- v2.6.1
- v2.6.0
- v2.5.2
- v2.5.1
- v2.5.0
- v2.4.3
- v2.4.2
- v2.4.0
- v2.3.0
- v2.2.0
- v2.1.0
- v2.0.3
- v2.0.2
- v2.0.1
- v2.0.0
- dev-dependabot/npm_and_yarn/word-wrap-1.2.4
This package is auto-updated.
Last update: 2024-10-18 23:24:36 UTC
README
A collapsible jQuery menu plugin
This version does not support any version of IE browser.
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
Usage
- Include metismenu StyleSheet
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css"> <!-- OR --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
- Include jQuery
<script src="https://unpkg.com/jquery"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
- Include metisMenu plugin's code
<script src="https://unpkg.com/metismenu"></script> <!-- OR --> <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
- Add id attribute to unordered list
<ul id="metismenu"> </ul>
- Make expand/collapse controls accessible
Be sure to add
aria-expanded
to the elementa
. 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 ofaria-expanded="false"
. If you've set the collapsible element's parentli
element to be open by default using themm-active
class, setaria-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 id="metismenu"> <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>
- Arrow Options
add
has-arrow
class toa
element
<ul id="metismenu"> <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>
- Call the plugin:
$("#metismenu").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>
toggle
Type: Boolean
Default: true
For auto collapse support.
$("#metismenu").metisMenu({ toggle: false });
dispose
Type: String
Default: null
For stop and destroy metisMenu.
$("#metismenu").metisMenu('dispose');
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
$("#metismenu").metisMenu({ triggerElement: '.nav-link' // bootstrap 5 });
parentTrigger
Type: jQuery selector
Default: li
$("#metismenu").metisMenu({ parentTrigger: '.nav-item' // bootstrap 5 });
subMenu
Type: jQuery selector
Default: ul
$("#metismenu").metisMenu({ subMenu: '.nav.flex-column' // bootstrap 5 });
Events
Migrating to v3 from v2
- Update
metisMenu.js
&metisMenu.css
files - Change
active
class tomm-active
Demo
Contains a simple HTML file to demonstrate metisMenu plugin.
About
Related projects
- @metismenu/react: react component for MetisMenu | homepage
- metismenujs: MetisMenu with Vanilla-JS | homepage
Contributors
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
Author
Osman Nuri Okumus
License
Copyright © 2021, Osman Nuri Okumus. Released under the MIT License.