+
+
+
+
+
(TOC generated by verb using markdown-toc)
+
Getting started
+
Install
+
Install with npm:
+
$ npm install
+
+
Install with yarn:
+
$ yarn add metismenu
+
+
Install with composer
+
$ composer require onokumus/metismenu:dev-master
+
+
Download
+
download
+
Usage
+
+ -
+
Include metismenu StyleSheet
+ <link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
+
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
+
+
+ -
+
Include jQuery
+ <script src="https://unpkg.com/jquery"></script>
+
+ <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
+
+
+ -
+
Include metisMenu plugin's code
+ <script src="https://unpkg.com/metismenu"></script>
+
+ <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 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 mm-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 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 to a 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>
+
+
Options
+
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'
+ });
+
+
parentTrigger
+
Type: jQuery selector
+ Default: li
+
$("#metismenu").metisMenu({
+ parentTrigger: '.nav-item'
+ });
+
+
+
Type: jQuery selector
+ Default: ul
+
$("#metismenu").metisMenu({
+ subMenu: '.nav.flex-column'
+ });
+
+
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 v3 from v2
+
+ - Update
metisMenu.js & metisMenu.css files
+ - Change
active class to mm-active
+
+
+
+
Author
+
Osman Nuri Okumus
+
+
License
+
Copyright © 2018, Osman Nuri Okumus.
+ Released under the MIT License.
+
+
+
+
+
+
+
+
diff --git a/public/plugins/metismenu/demo/mm-ajax.html b/public/plugins/metismenu/demo/mm-ajax.html
new file mode 100644
index 0000000..12b5f25
--- /dev/null
+++ b/public/plugins/metismenu/demo/mm-ajax.html
@@ -0,0 +1,253 @@
+
+
+
+
+