Updating js plugins
This commit is contained in:
ahwelp
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"modules": false,
|
||||
"loose": true
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "metismenu",
|
||||
"homepage": "https://github.com/onokumus/metisMenu",
|
||||
"version": "3.0.6",
|
||||
"_release": "3.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v3.0.6",
|
||||
"commit": "555109729f275ec46aa0b085ff53763ab682d64d"
|
||||
},
|
||||
"_source": "https://github.com/onokumus/metisMenu.git",
|
||||
"_target": "3.0.6",
|
||||
"_originalSource": "metismenu"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/dist
|
||||
/demo
|
||||
/node_modules
|
||||
package.js
|
||||
postcss.config.js
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
"es6": true,
|
||||
"jquery": true
|
||||
},
|
||||
"rules": {
|
||||
"import/no-unresolved": ["error", { "ignore": ["jquery"] }],
|
||||
"import/extensions": ["error", { "jquery": "never" }]
|
||||
},
|
||||
"extends": "airbnb-base"
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
# Enforce Unix newlines
|
||||
*.* text eol=lf
|
||||
*.css text eol=lf
|
||||
*.html text eol=lf
|
||||
*.js text eol=lf
|
||||
*.json text eol=lf
|
||||
*.less text eol=lf
|
||||
*.md text eol=lf
|
||||
*.yml text eol=lf
|
||||
|
||||
*.jpg binary
|
||||
*.gif binary
|
||||
*.png binary
|
||||
*.jpeg binary
|
||||
@@ -0,0 +1,57 @@
|
||||
# Contributing to metismenu
|
||||
|
||||
First and foremost, thank you! We appreciate that you want to contribute to metismenu, your time is valuable, and your contributions mean a lot to us.
|
||||
|
||||
**What does "contributing" mean?**
|
||||
|
||||
Creating an issue is the simplest form of contributing to a project. But there are many ways to contribute, including the following:
|
||||
|
||||
- Updating or correcting documentation
|
||||
- Feature requests
|
||||
- Bug reports
|
||||
|
||||
If you'd like to learn more about contributing in general, the [Guide to Idiomatic Contributing](https://github.com/jonschlinkert/idiomatic-contributing) has a lot of useful information.
|
||||
|
||||
**Showing support for metismenu**
|
||||
|
||||
Please keep in mind that open source software is built by people like you, who spend their free time creating things the rest the community can use.
|
||||
|
||||
Don't have time to contribute? No worries, here are some other ways to show your support for metismenu:
|
||||
|
||||
- star the [project](https://github.com/onokumus/metismenu)
|
||||
- tweet your support for metismenu
|
||||
|
||||
## Issues
|
||||
|
||||
### Before creating an issue
|
||||
|
||||
Please try to determine if the issue is caused by an underlying library, and if so, create the issue there. Sometimes this is difficult to know. We only ask that you attempt to give a reasonable attempt to find out. Oftentimes the readme will have advice about where to go to create issues.
|
||||
|
||||
Try to follow these guidelines
|
||||
|
||||
- **Investigate the issue**:
|
||||
- **Check the readme** - oftentimes you will find notes about creating issues, and where to go depending on the type of issue.
|
||||
- Create the issue in the appropriate repository.
|
||||
|
||||
### Creating an issue
|
||||
|
||||
Please be as descriptive as possible when creating an issue. Give us the information we need to successfully answer your question or address your issue by answering the following in your issue:
|
||||
|
||||
- **version**: please note the version of metismenu are you using
|
||||
- **extensions, plugins, helpers, etc** (if applicable): please list any extensions you're using
|
||||
- **error messages**: please paste any error messages into the issue, or a [gist](https://gist.github.com/)
|
||||
|
||||
## Above and beyond
|
||||
|
||||
Here are some tips for creating idiomatic issues. Taking just a little bit extra time will make your issue easier to read, easier to resolve, more likely to be found by others who have the same or similar issue in the future.
|
||||
|
||||
- read the [Guide to Idiomatic Contributing](https://github.com/jonschlinkert/idiomatic-contributing)
|
||||
- take some time to learn basic markdown. This [markdown cheatsheet](https://gist.github.com/jonschlinkert/5854601) is super helpful, as is the GitHub guide to [basic markdown](https://help.github.com/articles/markdown-basics/).
|
||||
- Learn about [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). And if you want to really go above and beyond, read [mastering markdown](https://guides.github.com/features/mastering-markdown/).
|
||||
- use backticks to wrap code. This ensures that code will retain its format, making it much more readable to others
|
||||
- use syntax highlighting by adding the correct language name after the first "code fence"
|
||||
|
||||
|
||||
[node-glob]: https://github.com/isaacs/node-glob
|
||||
[micromatch]: https://github.com/jonschlinkert/micromatch
|
||||
[so]: http://stackoverflow.com/questions/tagged/metismenulk
|
||||
@@ -0,0 +1,34 @@
|
||||
Welcome to the metismenu issues!
|
||||
|
||||
Please take a moment to:
|
||||
|
||||
- Read the Contributing Guide (found at https://github.com/onokumus/metismenu/tree/master/.github/contributing.md)
|
||||
- Review the project readme (you might find advice about creating new issues)
|
||||
|
||||
|
||||
Once have reviewed both documents, please delete everything up to and including this line and provide the following details.
|
||||
|
||||
|
||||
## Version
|
||||
|
||||
_(note the version of metismenu you were using when you experienced the issue (this is **required** for bug reports)
|
||||
|
||||
**version**:
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
|
||||
## Error message
|
||||
|
||||
```sh
|
||||
# please paste any error messages here
|
||||
```
|
||||
|
||||
## metisMenu.js
|
||||
|
||||
```js
|
||||
// Please paste contents of metisMenu.js here, or in a gist.
|
||||
// Be sure to include any additional comments that might help
|
||||
// us resolve the issue.
|
||||
```
|
||||
@@ -0,0 +1,59 @@
|
||||
# Numerous always-ignore extensions
|
||||
*.csv
|
||||
*.dat
|
||||
*.diff
|
||||
*.err
|
||||
*.gz
|
||||
*.log
|
||||
*.orig
|
||||
*.out
|
||||
*.pid
|
||||
*.rej
|
||||
*.seed
|
||||
*.swo
|
||||
*.swp
|
||||
*.vi
|
||||
*.yo-rc.json
|
||||
*.zip
|
||||
*~
|
||||
.ruby-version
|
||||
lib-cov
|
||||
|
||||
# OS or Editor folders
|
||||
*.esproj
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
._*
|
||||
.cache
|
||||
.DS_Store
|
||||
.idea
|
||||
.project
|
||||
.settings
|
||||
.tmproj
|
||||
.directory
|
||||
nbproject
|
||||
backup
|
||||
Thumbs.db
|
||||
.tmp
|
||||
|
||||
# Komodo
|
||||
*.komodoproject
|
||||
.komodotools
|
||||
|
||||
# grunt-html-validation
|
||||
validation-status.json
|
||||
validation-report.json
|
||||
|
||||
# Vendor packages
|
||||
node_modules
|
||||
bower_components
|
||||
vendor
|
||||
templates/partials/ads.hbs
|
||||
templates/partials/ga.hbs
|
||||
|
||||
|
||||
# General folders and files to ignore
|
||||
_gh_pages
|
||||
tmp
|
||||
temp
|
||||
TODO.md
|
||||
@@ -0,0 +1,7 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 'node'
|
||||
- '9'
|
||||
- '8'
|
||||
- '7'
|
||||
- '6'
|
||||
@@ -0,0 +1,269 @@
|
||||
# {%= name %} {%= unless(disabled("badges"), include("badges"), "") %}[](https://www.jsdelivr.com/package/npm/metismenu) [](https://packagist.org/packages/onokumus/metismenu)
|
||||
|
||||
> {%= description %}
|
||||
|
||||
## metismenu without jQuery
|
||||
If you want to try MetisMenu without jQuery, see [MetisMenuJS](https://github.com/onokumus/metismenujs) repository.
|
||||
|
||||
{%= include("highlight") %}
|
||||
|
||||
{%= include("toc") %}
|
||||
|
||||
## Getting started
|
||||
### Install
|
||||
{%= include("install-npm", {save: true}) %}
|
||||
|
||||
{%= include("install-yarn", {save: true}) %}
|
||||
|
||||
Install with [composer](https://getcomposer.org/)
|
||||
|
||||
```sh
|
||||
$ composer require onokumus/metismenu:dev-master
|
||||
```
|
||||
|
||||
### Download
|
||||
[download](https://github.com/onokumus/metisMenu/archive/master.zip)
|
||||
|
||||
## Usage
|
||||
|
||||
1. Include {%= name %} StyleSheet
|
||||
|
||||
```html
|
||||
<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">
|
||||
```
|
||||
|
||||
2. Include jQuery
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/jquery"></script>
|
||||
<!-- OR -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
```
|
||||
|
||||
3. Include metisMenu plugin's code
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<!-- OR -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
|
||||
```
|
||||
|
||||
4. Add id attribute to unordered list
|
||||
|
||||
```html
|
||||
<ul id="metismenu">
|
||||
|
||||
</ul>
|
||||
```
|
||||
5. 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.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
6. Arrow Options
|
||||
|
||||
> add `has-arrow` class to `a` element
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
7. Call the plugin:
|
||||
|
||||
```javascript
|
||||
$("#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:
|
||||
|
||||
```html
|
||||
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
#### toggle
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
For auto collapse support.
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
```
|
||||
|
||||
#### dispose
|
||||
Type: `String`
|
||||
Default: `null`
|
||||
|
||||
For stop and destroy metisMenu.
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu('dispose');
|
||||
```
|
||||
|
||||
#### preventDefault
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
>Prevents or allows dropdowns' onclick events after expanding/collapsing.
|
||||
|
||||
```javascript
|
||||
$("#menu").metisMenu({
|
||||
preventDefault: false
|
||||
});
|
||||
```
|
||||
|
||||
*since from version 2.7.0*
|
||||
|
||||
#### triggerElement
|
||||
Type: `jQuery selector`
|
||||
Default: `a`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
triggerElement: '.nav-link' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
#### parentTrigger
|
||||
Type: `jQuery selector`
|
||||
Default: `li`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
parentTrigger: '.nav-item' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
#### subMenu
|
||||
Type: `jQuery selector`
|
||||
Default: `ul`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
subMenu: '.nav.flex-column' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
## 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`
|
||||
|
||||
## Demo
|
||||
[http://mm.onokumus.com](http://mm.onokumus.com)
|
||||
|
||||
Contains a simple HTML file to demonstrate metisMenu plugin.
|
||||
|
||||
## About
|
||||
|
||||
{%= section("community") %}
|
||||
|
||||
### Related projects
|
||||
{%= section("related", related(verb.related.list)) %}
|
||||
|
||||
### Contributors
|
||||
{%= gh.contributors() %}
|
||||
|
||||
### Contributing
|
||||
{%= include("contributing") %}
|
||||
|
||||
### Release History
|
||||
|**DATE** |**VERSION** |**CHANGES**|
|
||||
|--------------|--------------|-----------|
|
||||
|2020-03-22 |v3.0.6 |fix security vulnerabilities|
|
||||
|2019-12-28 |v3.0.5 |Fix dispose to be similar to init (adding event) [#184](https://github.com/onokumus/metismenu/pull/184)|
|
||||
|2019-03-07 |v3.0.4 |fix|
|
||||
|2018-10-05 |v3.0.3 |fix|
|
||||
|2018-10-05 |v3.0.2 |fix|
|
||||
|2018-10-05 |v3.0.1 |fix|
|
||||
|2018-10-05 |v3.0.0 |more functionally|
|
||||
|2018-10-05 |v2.7.9.1 |Fix dispose option [#173](https://github.com/onokumus/metismenu/pull/173)|
|
||||
|2018-06-28 |v2.7.9 |Make jquery a peer dependency|
|
||||
|2018-06-14 |v2.7.8 |remove aria-expanded attribute & remove transitionend check|
|
||||
|2018-02-14 |v2.7.4 |jQuery -> $ in src/metisMenu.js to fix import. [#158](https://github.com/onokumus/metismenu/pull/158)|
|
||||
|2018-02-14 |v2.7.3 |window might not be defined in node.js environment [#156](https://github.com/onokumus/metismenu/pull/156)|
|
||||
|2017-12-31 |v2.7.2 |isolate against bootstrap changes, remove old legacy ie9 code [#154](https://github.com/onokumus/metismenu/pull/154)|
|
||||
|2017-10-30 |v2.7.1 |added check in complete()-callback to break when menu was disposed [#150](https://github.com/onokumus/metismenu/pull/150)|
|
||||
|2017-03-08 |v2.7.0 |fixed `has-arrow` class border color & added new 3 options|
|
||||
|2017-02-23 |v2.6.3 |fixed #129|
|
||||
|2017-02-02 |v2.6.2 |doubleTapToGo option is deprecated|
|
||||
|2016-12-06 |v2.6.1 |fix require.js|
|
||||
|2016-11-29 |v2.6.0 |dispose support|
|
||||
|2016-05-06 |v2.5.2 |fix Menu failed to remove collapsing class|
|
||||
|2016-05-06 |v2.5.1 |fixed bootstrap conflict|
|
||||
|2016-03-31 |v2.5.0 |Event support|
|
||||
|2016-03-11 |v2.4.3 |create meteor package|
|
||||
|2016-03-04 |v2.4.2 |back to version 2.4.0|
|
||||
|2016-03-03 |v2.4.1 |<del>Transition element passed to methods</del> (removed)|
|
||||
|2016-01-25 |v2.4.0 |Support AMD / Node / CommonJS|
|
||||
|2016-01-08 |v2.3.0 |Adding aria-disabled=true to the link element prevents the dropdown from opening|
|
||||
|2015-09-27 |v2.2.0 |Events supported & added preventDefault options|
|
||||
|2015-08-06 |v2.1.0 |RTL & `aria-expanded` attribute & TypeScript type definitions support|
|
||||
|2015-07-25 |v2.0.3 |When the active item has doubleTapToGo should not collapse|
|
||||
|2015-05-23 |v2.0.2 |[fixed](https://github.com/onokumus/metisMenu/issues/34#issuecomment-104656754)|
|
||||
|2015-05-22 |v2.0.1 |changeable classname support|
|
||||
|2015-04-03 |v2.0.0 |Remove Bootstrap dependency|
|
||||
|2015-03-24 |v1.1.3 |composer support|
|
||||
|2014-11-01 |v1.1.3 |Bootstrap 3.3.0|
|
||||
|2014-07-07 |v1.1.0 |Add double tap functionality|
|
||||
|2014-06-24 |v1.0.3 |cdnjs support & rename plugin|
|
||||
|2014-06-18 |v1.0.3 |Create grunt task|
|
||||
|2014-06-10 |v1.0.2 |Fixed for IE8 & IE9|
|
||||
|
||||
### Author
|
||||
{%= include("author", {author: {linkedin:"onokumus"}}) %}
|
||||
|
||||
### License
|
||||
{%= copyright({linkify: true, prefix: "Copyright", symbol: "©"}) %}
|
||||
{%= licenseStatement || (license ? ("Released under the " + license + " License.") : "MIT") %}
|
||||
|
||||
***
|
||||
|
||||
{%= include("footer") %}
|
||||
{%= reflinks(verb.reflinks) %}
|
||||
@@ -0,0 +1,4 @@
|
||||
jquery@1.11.4
|
||||
meteor@1.1.10
|
||||
onokumus:metismenu@3.0.6
|
||||
underscore@1.0.4
|
||||
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-2018 Osman Nuri Okumuş
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,341 @@
|
||||
# metismenu [](https://www.npmjs.com/package/metismenu) [](https://npmjs.org/package/metismenu) [](https://npmjs.org/package/metismenu)
|
||||
|
||||
[![]
|
||||
|
||||
> A jQuery menu plugin
|
||||
|
||||
## metismenu without jQuery
|
||||
|
||||
If you want to try MetisMenu without jQuery, see [MetisMenuJS](https://github.com/onokumus/metismenujs) repository.
|
||||
|
||||
- [Getting started](#getting-started)
|
||||
* [Install](#install)
|
||||
* [Download](#download)
|
||||
- [Usage](#usage)
|
||||
* [Stopping list opening on certain elements](#stopping-list-opening-on-certain-elements)
|
||||
+ [toggle](#toggle)
|
||||
+ [dispose](#dispose)
|
||||
+ [preventDefault](#preventdefault)
|
||||
+ [triggerElement](#triggerelement)
|
||||
+ [parentTrigger](#parenttrigger)
|
||||
+ [subMenu](#submenu)
|
||||
- [Events](#events)
|
||||
- [Migrating to v3 from v2](#migrating-to-v3-from-v2)
|
||||
- [Demo](#demo)
|
||||
- [About](#about)
|
||||
* [Related projects](#related-projects)
|
||||
* [Contributors](#contributors)
|
||||
* [Contributing](#contributing)
|
||||
* [Release History](#release-history)
|
||||
* [Author](#author)
|
||||
* [License](#license)
|
||||
|
||||
_(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](https://github.com/jonschlinkert/markdown-toc))_
|
||||
|
||||
## Getting started
|
||||
|
||||
### Install
|
||||
|
||||
Install with [npm](https://www.npmjs.com/):
|
||||
|
||||
```sh
|
||||
$ npm install --save metismenu
|
||||
```
|
||||
|
||||
Install with [yarn](https://yarnpkg.com):
|
||||
|
||||
```sh
|
||||
$ yarn add metismenu
|
||||
```
|
||||
|
||||
Install with [composer](https://getcomposer.org/)
|
||||
|
||||
```sh
|
||||
$ composer require onokumus/metismenu:dev-master
|
||||
```
|
||||
|
||||
### Download
|
||||
|
||||
[download](https://github.com/onokumus/metisMenu/archive/master.zip)
|
||||
|
||||
## Usage
|
||||
|
||||
1. Include metismenu StyleSheet
|
||||
|
||||
```html
|
||||
<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">
|
||||
```
|
||||
|
||||
1. Include jQuery
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/jquery"></script>
|
||||
<!-- OR -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
```
|
||||
|
||||
1. Include metisMenu plugin's code
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<!-- OR -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
|
||||
```
|
||||
|
||||
1. Add id attribute to unordered list
|
||||
|
||||
```html
|
||||
<ul id="metismenu">
|
||||
|
||||
</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 `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.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
1. Arrow Options
|
||||
|
||||
> add `has-arrow` class to `a` element
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
1. Call the plugin:
|
||||
|
||||
```javascript
|
||||
$("#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:
|
||||
|
||||
```html
|
||||
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>
|
||||
```
|
||||
|
||||
#### toggle
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
For auto collapse support.
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
```
|
||||
|
||||
#### dispose
|
||||
|
||||
Type: `String`
|
||||
Default: `null`
|
||||
|
||||
For stop and destroy metisMenu.
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu('dispose');
|
||||
```
|
||||
|
||||
#### preventDefault
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
> Prevents or allows dropdowns' onclick events after expanding/collapsing.
|
||||
|
||||
```javascript
|
||||
$("#menu").metisMenu({
|
||||
preventDefault: false
|
||||
});
|
||||
```
|
||||
|
||||
_since from version 2.7.0_
|
||||
|
||||
#### triggerElement
|
||||
|
||||
Type: `jQuery selector`
|
||||
Default: `a`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
triggerElement: '.nav-link' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
#### parentTrigger
|
||||
|
||||
Type: `jQuery selector`
|
||||
Default: `li`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
parentTrigger: '.nav-item' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
#### subMenu
|
||||
|
||||
Type: `jQuery selector`
|
||||
Default: `ul`
|
||||
|
||||
```javascript
|
||||
$("#metismenu").metisMenu({
|
||||
subMenu: '.nav.flex-column' // bootstrap 4
|
||||
});
|
||||
```
|
||||
|
||||
## 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`
|
||||
|
||||
## Demo
|
||||
|
||||
[http://mm.onokumus.com](http://mm.onokumus.com)
|
||||
|
||||
Contains a simple HTML file to demonstrate metisMenu plugin.
|
||||
|
||||
## About
|
||||
|
||||
### Related projects
|
||||
|
||||
* [metismenujs](https://www.npmjs.com/package/metismenujs): MetisMenu with Vanilla-JS | [homepage](https://github.com/onokumus/metismenujs#readme "MetisMenu with Vanilla-JS")
|
||||
* [onoffcanvas](https://www.npmjs.com/package/onoffcanvas): An offcanvas plugin | [homepage](https://github.com/onokumus/onoffcanvas "An offcanvas plugin")
|
||||
|
||||
### Contributors
|
||||
|
||||
| **Commits** | **Contributor** |
|
||||
| --- | --- |
|
||||
| 209 | [onokumus](https://github.com/onokumus) |
|
||||
| 8 | [diegozhu](https://github.com/diegozhu) |
|
||||
| 4 | [sinabs](https://github.com/sinabs) |
|
||||
| 4 | [DrugoLebowski](https://github.com/DrugoLebowski) |
|
||||
| 3 | [BurkovBA](https://github.com/BurkovBA) |
|
||||
| 2 | [arthurtalkgoal](https://github.com/arthurtalkgoal) |
|
||||
| 2 | [mrdziuban](https://github.com/mrdziuban) |
|
||||
| 2 | [nicolasigot](https://github.com/nicolasigot) |
|
||||
| 2 | [PeterDaveHello](https://github.com/PeterDaveHello) |
|
||||
| 2 | [kalidema](https://github.com/kalidema) |
|
||||
| 2 | [AndrewEastwood](https://github.com/AndrewEastwood) |
|
||||
| 2 | [rgnevashev](https://github.com/rgnevashev) |
|
||||
| 1 | [719media](https://github.com/719media) |
|
||||
| 1 | [chriswiggins](https://github.com/chriswiggins) |
|
||||
| 1 | [jmagnusson](https://github.com/jmagnusson) |
|
||||
| 1 | [LukasDrgon](https://github.com/LukasDrgon) |
|
||||
| 1 | [Cediddi](https://github.com/Cediddi) |
|
||||
| 1 | [WoMayr](https://github.com/WoMayr) |
|
||||
| 1 | [capynet](https://github.com/capynet) |
|
||||
|
||||
### Contributing
|
||||
|
||||
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).
|
||||
|
||||
Please read the [contributing guide](.github/contributing.md) for advice on opening issues, pull requests, and coding standards.
|
||||
|
||||
### Release History
|
||||
|
||||
|**DATE** |**VERSION** |**CHANGES**|
|
||||
|--------------|--------------|-----------|
|
||||
|2020-03-22 |v3.0.6 |fix security vulnerabilities|
|
||||
|2019-12-28 |v3.0.5 |Fix dispose to be similar to init (adding event) [#184](https://github.com/onokumus/metismenu/pull/184)|
|
||||
|2019-03-07 |v3.0.4 |fix|
|
||||
|2018-10-05 |v3.0.3 |fix|
|
||||
|2018-10-05 |v3.0.2 |fix|
|
||||
|2018-10-05 |v3.0.1 |fix|
|
||||
|2018-10-05 |v3.0.0 |more functionally|
|
||||
|2018-10-05 |v2.7.9.1 |Fix dispose option [#173](https://github.com/onokumus/metismenu/pull/173)|
|
||||
|2018-06-28 |v2.7.9 |Make jquery a peer dependency|
|
||||
|2018-06-14 |v2.7.8 |remove aria-expanded attribute & remove transitionend check|
|
||||
|2018-02-14 |v2.7.4 |jQuery -> $ in src/metisMenu.js to fix import. [#158](https://github.com/onokumus/metismenu/pull/158)|
|
||||
|2018-02-14 |v2.7.3 |window might not be defined in node.js environment [#156](https://github.com/onokumus/metismenu/pull/156)|
|
||||
|2017-12-31 |v2.7.2 |isolate against bootstrap changes, remove old legacy ie9 code [#154](https://github.com/onokumus/metismenu/pull/154)|
|
||||
|2017-10-30 |v2.7.1 |added check in complete()-callback to break when menu was disposed [#150](https://github.com/onokumus/metismenu/pull/150)|
|
||||
|2017-03-08 |v2.7.0 |fixed `has-arrow` class border color & added new 3 options|
|
||||
|2017-02-23 |v2.6.3 |fixed #129|
|
||||
|2017-02-02 |v2.6.2 |doubleTapToGo option is deprecated|
|
||||
|2016-12-06 |v2.6.1 |fix require.js|
|
||||
|2016-11-29 |v2.6.0 |dispose support|
|
||||
|2016-05-06 |v2.5.2 |fix Menu failed to remove collapsing class|
|
||||
|2016-05-06 |v2.5.1 |fixed bootstrap conflict|
|
||||
|2016-03-31 |v2.5.0 |Event support|
|
||||
|2016-03-11 |v2.4.3 |create meteor package|
|
||||
|2016-03-04 |v2.4.2 |back to version 2.4.0|
|
||||
|2016-03-03 |v2.4.1 |<del>Transition element passed to methods</del> (removed)|
|
||||
|2016-01-25 |v2.4.0 |Support AMD / Node / CommonJS|
|
||||
|2016-01-08 |v2.3.0 |Adding aria-disabled=true to the link element prevents the dropdown from opening|
|
||||
|2015-09-27 |v2.2.0 |Events supported & added preventDefault options|
|
||||
|2015-08-06 |v2.1.0 |RTL & `aria-expanded` attribute & TypeScript type definitions support|
|
||||
|2015-07-25 |v2.0.3 |When the active item has doubleTapToGo should not collapse|
|
||||
|2015-05-23 |v2.0.2 |[fixed](https://github.com/onokumus/metisMenu/issues/34#issuecomment-104656754)|
|
||||
|2015-05-22 |v2.0.1 |changeable classname support|
|
||||
|2015-04-03 |v2.0.0 |Remove Bootstrap dependency|
|
||||
|2015-03-24 |v1.1.3 |composer support|
|
||||
|2014-11-01 |v1.1.3 |Bootstrap 3.3.0|
|
||||
|2014-07-07 |v1.1.0 |Add double tap functionality|
|
||||
|2014-06-24 |v1.0.3 |cdnjs support & rename plugin|
|
||||
|2014-06-18 |v1.0.3 |Create grunt task|
|
||||
|2014-06-10 |v1.0.2 |Fixed for IE8 & IE9|
|
||||
|
||||
### Author
|
||||
|
||||
**Osman Nuri Okumus**
|
||||
|
||||
* [GitHub Profile](https://github.com/onokumus)
|
||||
* [Twitter Profile](https://twitter.com/onokumus)
|
||||
* [LinkedIn Profile](https://linkedin.com/in/onokumus)
|
||||
|
||||
### License
|
||||
|
||||
Copyright © 2020, [Osman Nuri Okumus](https://github.com/onokumus).
|
||||
Released under the [MIT License](LICENSE).
|
||||
|
||||
***
|
||||
|
||||
_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.8.0, on March 22, 2020._
|
||||
@@ -0,0 +1,22 @@
|
||||
#### key
|
||||
|
||||
Changelog entries are classified using the following labels _(from [keep-a-changelog][]_):
|
||||
|
||||
- `added`: for new features
|
||||
- `changed`: for changes in existing functionality
|
||||
- `deprecated`: for once-stable features removed in upcoming releases
|
||||
- `removed`: for deprecated features removed in this release
|
||||
- `fixed`: for any bug fixes
|
||||
|
||||
Custom labels used in this changelog:
|
||||
|
||||
* `dependencies`: bumps dependencies
|
||||
* `housekeeping`: code re-organization, minor edits, or other changes that don't fit in one of the other categories.
|
||||
|
||||
### [0.0.1] - 2017-02-13
|
||||
|
||||
**added**
|
||||
|
||||
- initial release
|
||||
|
||||
[keep-a-changelog]: https://github.com/olivierlacan/keep-a-changelog
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "onokumus/metismenu",
|
||||
"description": "A jQuery menu plugin",
|
||||
"keywords": [
|
||||
"menu",
|
||||
"plugin",
|
||||
"jquery",
|
||||
"web",
|
||||
"css",
|
||||
"js",
|
||||
"bootstrap"
|
||||
],
|
||||
"homepage": "https://github.com/onokumus/metisMenu",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Osman Nuri Okumus",
|
||||
"email": "onokumus@gmail.com",
|
||||
"homepage": "https://onokumus.com"
|
||||
}
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/onokumus/metisMenu/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"suggest": {
|
||||
"components/jquery": ">=1.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
mm.onokumus.com
|
||||
@@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 1.1</a></li>
|
||||
<li><a href="#">ajax item 1.2</a></li>
|
||||
<li><a href="#">ajax item 1.3</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,6 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 2.1</a></li>
|
||||
<li><a href="#">ajax item 2.2</a></li>
|
||||
<li><a href="#">ajax item 2.3</a></li>
|
||||
<li><a href="#">ajax item 2.4</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,4 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 3.1</a></li>
|
||||
<li><a href="#">ajax item 3.2</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,8 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 4.1</a></li>
|
||||
<li><a href="#">ajax item 4.2</a></li>
|
||||
<li><a href="#">ajax item 4.3</a></li>
|
||||
<li><a href="#">ajax item 4.4</a></li>
|
||||
<li><a href="#">ajax item 4.5</a></li>
|
||||
<li><a href="#">ajax item 4.6</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,3 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 5.1</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--jumbotron-padding-y: 3rem;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding-top: var(--jumbotron-padding-y);
|
||||
padding-bottom: var(--jumbotron-padding-y);
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: calc(var(--jumbotron-padding-y) * 2);
|
||||
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron-heading {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.jumbotron .container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
|
||||
|
||||
#rtlh3 small {
|
||||
transform: rotateY(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid #b5b5b5;
|
||||
}
|
||||
.nav-mini {
|
||||
width: 50px;
|
||||
}
|
||||
.nav-mini ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
.nav-mini li {
|
||||
position: relative;
|
||||
}
|
||||
.nav-mini li, .nav-mini a {
|
||||
display: block;
|
||||
}
|
||||
.nav-mini a {
|
||||
padding: 10px 5px;
|
||||
text-decoration: none;
|
||||
color: #808080;
|
||||
}
|
||||
.nav-mini a .title {
|
||||
display: none;
|
||||
}
|
||||
.nav-mini .metismenu .collapse, .nav-mini .metismenu .collapsing {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
min-width: 160px;
|
||||
}
|
||||
.nav-mini .metismenu .collapse .collapse, .nav-mini .metismenu .collapse .collapsing {
|
||||
left: 0;
|
||||
top: auto;
|
||||
}
|
||||
.nav-mini .metismenu > li {
|
||||
border-bottom: 1px solid #b5b5b5;
|
||||
}
|
||||
.nav-mini .metismenu > li > a {
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding-left: 60px;
|
||||
background: #fff;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.faq-link {
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
background: #212529;
|
||||
color: #adb5bd
|
||||
}
|
||||
|
||||
.faq-item.active>.faq-link {
|
||||
background-color: #d9480f;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.metisFolder {
|
||||
padding-left: 0;
|
||||
}
|
||||
.metisFolder, .metisFolder ul {
|
||||
list-style: none;
|
||||
}
|
||||
.metisFolder li {
|
||||
position: relative;
|
||||
}
|
||||
.metisFolder li a {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
outline: 0 none;
|
||||
}
|
||||
.metisFolder ul:before {
|
||||
position: absolute;
|
||||
border-left: 1px dotted #333;
|
||||
content: "";
|
||||
width: 30px;
|
||||
top: 25px;
|
||||
left: 5px;
|
||||
bottom: 17px;
|
||||
}
|
||||
.metisFolder ul > li:before {
|
||||
position: absolute;
|
||||
border-top: 1px dotted #333;
|
||||
content: "";
|
||||
width: 30px;
|
||||
top: 13px;
|
||||
left: -33px;
|
||||
}
|
||||
li.active > a > span.fa-folder-o:before {
|
||||
content: "\f115" !important;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
.topbar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.topbar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #212529;
|
||||
}
|
||||
.topbar-nav .metismenu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar-nav .metismenu > li {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topbar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
|
||||
.topbar-nav .metismenu a:hover,
|
||||
.topbar-nav .metismenu a:focus,
|
||||
.topbar-nav .metismenu a:active {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.topbar-nav .metismenu {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.topbar-nav .metismenu > li {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar-nav .metismenu > li > ul {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
min-width: 100%;
|
||||
z-index: 1001;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li > ul {
|
||||
height: auto !important;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li:hover > a.has-arrow:after {
|
||||
-webkit-transform: rotate(-135deg);
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.sidebar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.sidebar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #212529;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu > li {
|
||||
/*-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;*/
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu a:hover,
|
||||
.sidebar-nav .metismenu a:focus,
|
||||
.sidebar-nav .metismenu a:active {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sidebar-nav .metismenu li {
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu > li > ul {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
min-width: 200px;
|
||||
z-index: 1001;
|
||||
}
|
||||
.sidebar-nav .metismenu > li:hover > ul {
|
||||
height: auto !important;
|
||||
}
|
||||
.sidebar-nav .metismenu > li:hover > ul,
|
||||
.sidebar-nav .metismenu > li:hover > ul.collapse {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu > li:hover > a.has-arrow:after {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.sidebar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.sidebar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #343a40;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu {
|
||||
background: #212529;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu li + li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu li:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.sidebar-nav .metismenu li:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-nav .metismenu > li {
|
||||
/*-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;*/
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 13px 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu ul a {
|
||||
padding: 10px 15px 10px 30px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu ul ul a {
|
||||
padding: 10px 15px 10px 45px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu a:hover,
|
||||
.sidebar-nav .metismenu a:focus,
|
||||
.sidebar-nav .metismenu a:active,
|
||||
.sidebar-nav .metismenu .mm-active > a {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
$(function() {
|
||||
$('table').addClass('table table-bordered table-striped');
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
$("#ajaxButton").one('click', function() {
|
||||
var $this = $(this);
|
||||
$.ajax({
|
||||
url: "demo-ajax.html",
|
||||
success: function(result) {
|
||||
|
||||
$('#menu').metisMenu('dispose');
|
||||
$("#menu").append(result);
|
||||
|
||||
new Noty({
|
||||
text: 'ajax menu appended to menu',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
|
||||
$('#menu').metisMenu();
|
||||
$this.attr('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
$("[data-url]").each(function(){
|
||||
$(this).one('click', function(event){
|
||||
event.preventDefault();
|
||||
var $this = $(this);
|
||||
var url = $this.attr('data-url');
|
||||
console.log(url);
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
success: function(result) {
|
||||
|
||||
$('#menu2').metisMenu('dispose');
|
||||
$this.parent('li').append(result);
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
$this.click();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function () {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
$(function() {
|
||||
|
||||
$('.metismenu').metisMenu({
|
||||
toggle: false,
|
||||
triggerElement: '.card-header',
|
||||
parentTrigger: '.card',
|
||||
subMenu: '.card-body'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
$('#stopMm').on('click', function(event) {
|
||||
$('#menu').metisMenu('dispose');
|
||||
new Noty({
|
||||
text: 'metisMenu stopped',
|
||||
layout: 'topRight',
|
||||
type: 'error',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
});
|
||||
|
||||
$('#startMm').on('click', function(event) {
|
||||
$('#menu').metisMenu();
|
||||
new Noty({
|
||||
text: 'metisMenu restarted',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
});
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
$('#deleteElem').one('click', function(event) {
|
||||
$(this).removeClass('btn-danger').addClass('btn-success').html('Menu 1 removed').attr('disabled', 'disabled');
|
||||
$('#menu1').metisMenu('dispose');
|
||||
|
||||
$('#menu1 #removable').remove();
|
||||
new Noty({
|
||||
text: 'Menu 1 removed',
|
||||
layout: 'topRight',
|
||||
type: 'information',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu().on('show.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' opening ...',
|
||||
layout: 'topRight',
|
||||
type: 'information',
|
||||
theme: 'relax',
|
||||
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('shown.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' opened',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('hide.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' collapsing ...',
|
||||
layout: 'topRight',
|
||||
type: 'warning',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('hidden.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' collapsed',
|
||||
layout: 'topRight',
|
||||
type: 'error',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
$(function() {
|
||||
$('#menu')
|
||||
.metisMenu()
|
||||
.on('shown.metisMenu', function(event) {
|
||||
Jump("#menu")
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
$(function() {
|
||||
|
||||
$('.faq-menu').metisMenu({
|
||||
toggle: false,
|
||||
triggerElement: '.faq-link',
|
||||
parentTrigger: '.faq-item',
|
||||
subMenu: '.faq-answer'
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function () {
|
||||
$('.metisFolder').metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
$('#menu2').metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
|
||||
$('#menu3').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">AJAX Menu</a>
|
||||
<ul>
|
||||
<li><a href="#">ajax item 1</a></li>
|
||||
<li><a href="#">ajax item 2</a></li>
|
||||
<li><a href="http://api.jquery.com/jquery.ajax/" target="_blank">ajax document</a></li>
|
||||
<li><a href="#">ajax item 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - index</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a>
|
||||
<a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h1 class="jumbotron-heading">metisMenu</h1>
|
||||
<p class="lead text-muted">A jQuery menu plugin</p>
|
||||
<p>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu" data-icon="octicon-star" data-size="large"
|
||||
data-show-count="true" aria-label="Star onokumus/metismenu on GitHub">Star</a>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu/fork" data-icon="octicon-repo-forked"
|
||||
data-size="large" data-show-count="true" aria-label="Fork onokumus/metismenu on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu/archive/master.zip" data-icon="octicon-cloud-download"
|
||||
data-size="large" aria-label="Download onokumus/metismenu on GitHub">Download</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/metismenu"><img src="https://img.shields.io/npm/v/metismenu.svg?style=flat"
|
||||
alt="NPM version"></a>
|
||||
<a href="https://npmjs.org/package/metismenu"><img src="https://img.shields.io/npm/dm/metismenu.svg?style=flat"
|
||||
alt="NPM monthly downloads"></a>
|
||||
<a href="https://npmjs.org/package/metismenu"><img src="https://img.shields.io/npm/dt/metismenu.svg?style=flat"
|
||||
alt="NPM total downloads"></a>
|
||||
<a href="https://travis-ci.org/onokumus/metismenu"><img src="https://img.shields.io/travis/onokumus/metismenu.svg?style=flat&label=Travis"
|
||||
alt="Linux Build Status"></a>
|
||||
<a href="https://www.jsdelivr.com/package/npm/metismenu"><img src="https://data.jsdelivr.com/v1/package/npm/metismenu/badge"
|
||||
alt=""></a>
|
||||
<a href="https://packagist.org/packages/onokumus/metismenu"><img src="https://img.shields.io/packagist/v/onokumus/metismenu.svg"
|
||||
alt="Packagist"></a>
|
||||
</p>
|
||||
</section>
|
||||
<ul>
|
||||
<li><a href="#getting-started">Getting started</a>
|
||||
<ul>
|
||||
<li><a href="#install">Install</a></li>
|
||||
<li><a href="#download">Download</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#options">Options</a>
|
||||
<ul>
|
||||
<li><a href="#toggle">toggle</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#preventdefault">preventDefault</a></li>
|
||||
<li><a href="#triggerelement">triggerElement</a></li>
|
||||
<li><a href="#parenttrigger">parentTrigger</a></li>
|
||||
<li><a href="#submenu">subMenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
<li><a href="#migrating-to-v3-from-v2">Migrating to v3 from v2</a></li>
|
||||
<li><a href="#demo">Demo</a></li>
|
||||
<li><a href="#about">About</a>
|
||||
<ul>
|
||||
<li><a href="#related-projects">Related projects</a></li>
|
||||
<li><a href="#contributors">Contributors</a></li>
|
||||
<li><a href="#contributing">Contributing</a></li>
|
||||
<li><a href="#release-history">Release History</a></li>
|
||||
<li><a href="#author">Author</a></li>
|
||||
<li><a href="#license">License</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><em>(TOC generated by <a href="https://github.com/verbose/verb">verb</a> using <a href="https://github.com/jonschlinkert/markdown-toc">markdown-toc</a>)</em></p>
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
<h3 id="install">Install</h3>
|
||||
<p>Install with <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
<pre><code class="lang-sh">$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://yarnpkg.com">yarn</a>:</p>
|
||||
<pre><code class="lang-sh">$ yarn <span class="hljs-keyword">add</span><span class="bash"> metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://getcomposer.org/">composer</a></p>
|
||||
<pre><code class="lang-sh">$ composer <span class="hljs-keyword">require</span> onokumus/<span class="hljs-symbol">metismenu:</span>dev-master
|
||||
</code></pre>
|
||||
<h3 id="download">Download</h3>
|
||||
<p><a href="https://github.com/onokumus/metisMenu/archive/master.zip">download</a></p>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Include metismenu StyleSheet</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include jQuery</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include metisMenu plugin's code</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Add id attribute to unordered list</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Make expand/collapse controls accessible</p>
|
||||
<blockquote>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the element <code>a</code>. 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 <code>aria-expanded="false"</code>.
|
||||
If you've set the collapsible element's parent <code>li</code> element to be open by default using
|
||||
the <code>mm-active</code> class, set <code>aria-expanded="true"</code> on the control instead.
|
||||
The plugin will automatically toggle this attribute based on whether or not the collapsible element has
|
||||
been opened or closed.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Arrow Options</p>
|
||||
<blockquote>
|
||||
<p>add <code>has-arrow</code> class to <code>a</code> element</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the plugin:</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu();
|
||||
</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 id="stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</h3>
|
||||
<p>Setting aria-disabled="true" in the <code><a></code> element as shown will stop metisMenu
|
||||
opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">"true"</span>></span>List 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
</code></pre>
|
||||
<h2 id="options">Options</h2>
|
||||
<h4 id="toggle">toggle</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<p>For auto collapse support.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">toggle:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="dispose">dispose</h4>
|
||||
<p>Type: <code>String</code>
|
||||
Default: <code>null</code></p>
|
||||
<p>For stop and destroy metisMenu.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
</code></pre>
|
||||
<h4 id="preventdefault">preventDefault</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<blockquote>
|
||||
<p>Prevents or allows dropdowns' onclick events after expanding/collapsing.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#menu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">preventDefault:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<p><em>since from version 2.7.0</em></p>
|
||||
<h4 id="triggerelement">triggerElement</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>a</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
triggerElement: <span class="hljs-string">'.nav-link'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="parenttrigger">parentTrigger</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>li</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
parentTrigger: <span class="hljs-string">'.nav-item'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="submenu">subMenu</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>ul</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
subMenu: <span class="hljs-string">'.nav.flex-column'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="events">Events</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><strong>Event Type</strong></th>
|
||||
<th><strong>Description</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.metisMenu</td>
|
||||
<td>This event fires immediately when the <code>_show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been made visible to the user (will wait
|
||||
for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.metisMenu</td>
|
||||
<td>This event is fired immediately when the <code>_hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been hidden from the user (will wait for
|
||||
CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="migrating-to-v3-from-v2">Migrating to v3 from v2</h2>
|
||||
<ul>
|
||||
<li>Update <code>metisMenu.js</code> & <code>metisMenu.css</code> files</li>
|
||||
<li>Change <code>active</code> class to <code>mm-active</code></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Author</h3>
|
||||
<p><strong>Osman Nuri Okumus</strong></p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/onokumus">github/onokumus</a></li>
|
||||
<li><a href="https://twitter.com/onokumus">twitter/onokumus</a></li>
|
||||
</ul>
|
||||
<h3>License</h3>
|
||||
<p>Copyright © 2018, <a href="https://github.com/onokumus">Osman Nuri Okumus</a>.<br>
|
||||
Released under the <a href="LICENSE">MIT License</a>.</p>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('table').addClass('table table-bordered table-striped');
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - Ajax</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Ajax</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-ajax.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Simple Ajax</h5>
|
||||
<button type="button" class="btn btn-outline-success" id="ajaxButton">
|
||||
get ajax menu
|
||||
</button>
|
||||
<pre><code class="language-javascript">$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">"#ajaxButton"</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">var</span> $<span class="hljs-keyword">this</span> = $(<span class="hljs-keyword">this</span>);
|
||||
$.ajax({
|
||||
<span class="hljs-attr">url</span>: <span class="hljs-string">"demo-ajax.html"</span>,
|
||||
<span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
$(<span class="hljs-string">"#menu"</span>).append(result);
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
$<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'disabled'</span>, <span class="hljs-string">'disabled'</span>);
|
||||
}
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li><a href="" class="has-arrow" data-url="ajax-1.html">Ajax Menu 1</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-2.html">Ajax Menu 2</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-3.html">Ajax Menu 3</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-4.html">Ajax Menu 4</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Simple Ajax <small>one level</small></h5>
|
||||
<pre><code class="language-javascript"> $(<span class="hljs-string">'#menu2'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">"[data-url]"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
|
||||
$(<span class="hljs-keyword">this</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
|
||||
event.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $<span class="hljs-keyword">this</span> = $(<span class="hljs-keyword">this</span>);
|
||||
<span class="hljs-keyword">var</span> url = $<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'data-url'</span>);
|
||||
<span class="hljs-built_in">console</span>.log(url);
|
||||
|
||||
$.ajax({
|
||||
<span class="hljs-attr">url</span>: url,
|
||||
<span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
$<span class="hljs-keyword">this</span>.parent(<span class="hljs-string">'li'</span>).append(result);
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu();
|
||||
|
||||
$<span class="hljs-keyword">this</span>.click();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/js/mm-ajax.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - animate</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-vertical.css">
|
||||
<style>
|
||||
.metismenu .fade.mm-collapse.mm-show {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Animate</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-animate.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li class="active">
|
||||
<a href="#" aria-expanded="true">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
<span class="sidebar-nav-item">metisMenu</span>
|
||||
<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span>
|
||||
Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span>
|
||||
Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span>
|
||||
Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Bounce<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated bounce">
|
||||
<li>
|
||||
<a href="#">bounceIn</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInDown</a>
|
||||
<ul class="animated bounceInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInLeft</a>
|
||||
<ul class="animated bounceInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInRight</a>
|
||||
<ul class="animated bounceInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInUp</a>
|
||||
<ul class="animated bounceInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Fade<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated fade">
|
||||
<li>
|
||||
<a href="#">fadeIn</a>
|
||||
<ul class="animated fadeIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInDown</a>
|
||||
<ul class="animated fadeInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInDownBig</a>
|
||||
<ul class="animated fadeInDownBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInLeft</a>
|
||||
<ul class="animated fadeInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInLeftBig</a>
|
||||
<ul class="animated fadeInLeftBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInRight</a>
|
||||
<ul class="animated fadeInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInRightBig</a>
|
||||
<ul class="animated fadeInRightBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInUp</a>
|
||||
<ul class="animated fadeInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInUpBig</a>
|
||||
<ul class="animated fadeInUpBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Flip<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated flip">
|
||||
<li>
|
||||
<a href="#">flipInX</a>
|
||||
<ul class="animated flipInX">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">flipInY</a>
|
||||
<ul class="animated flipInY">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Zoom<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated swing">
|
||||
<li>
|
||||
<a href="#">zoomIn</a>
|
||||
<ul class="animated zoomIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInDown</a>
|
||||
<ul class="animated zoomInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInLeft</a>
|
||||
<ul class="animated zoomInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInRight</a>
|
||||
<ul class="animated zoomInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInUp</a>
|
||||
<ul class="animated zoomInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Slide<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated shake">
|
||||
<li>
|
||||
<a href="#">slideInDown</a>
|
||||
<ul class="animated slideInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInLeft</a>
|
||||
<ul class="animated slideInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInRight</a>
|
||||
<ul class="animated slideInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInUp</a>
|
||||
<ul class="animated zoomInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInUp</a>
|
||||
<ul class="animated zoomInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Animate</h5>
|
||||
<h6>Include <code>animate.css</code></h6>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/animate.css"</span>></span>
|
||||
</code></pre>
|
||||
<h6>Add <code>animated bounce</code> classes to <code>ul</code> element</h6>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"animated bounce"</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<p>if you want to use <code>animate fade</code> classes with <code>bootstrap 4</code>, add following code to your stylesheet file.</p>
|
||||
<pre><code class="language-css"><span class="hljs-selector-class">.metismenu</span> <span class="hljs-selector-class">.fade</span><span class="hljs-selector-class">.mm-collapse</span><span class="hljs-selector-class">.mm-show</span> {
|
||||
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;
|
||||
}
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-animate.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - Bootstrap Card</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<style>
|
||||
.metismenu .has-arrow {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Bootstrap Card</h2>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-bs-card.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row metismenu">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header has-arrow">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-2 mm-active">
|
||||
<div class="card-header has-arrow">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-bs-card.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - dispose menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Stop/Re-start</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-dispose.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Stop/Re-start</h5>
|
||||
<button type="button" class="btn btn-danger btn-lg" id="stopMm">
|
||||
stop metisMenu
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-lg" id="startMm">
|
||||
start metisMenu
|
||||
</button>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">'#stopMm'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
});
|
||||
|
||||
$(<span class="hljs-string">'#startMm'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
});
|
||||
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Delete elements</h5>
|
||||
<button class="btn btn-danger btn-lg" id="deleteElem">
|
||||
remove Menu 1
|
||||
</button>
|
||||
<pre><code class="language-javascript">$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">'#deleteElem'</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
$(<span class="hljs-keyword">this</span>).removeClass(<span class="hljs-string">'btn-danger'</span>)
|
||||
.addClass(<span class="hljs-string">'btn-success'</span>)
|
||||
.html(<span class="hljs-string">'Menu 1 removed'</span>)
|
||||
.attr(<span class="hljs-string">'disabled'</span>, <span class="hljs-string">'disabled'</span>);
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
|
||||
$(<span class="hljs-string">'#menu1 #removable'</span>).remove();
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-dispose.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - docs</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
|
||||
<style>
|
||||
@media (min-width: 992px) {
|
||||
.elk-app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.elk-container,
|
||||
.elk-main,
|
||||
.elk-side {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- BEGIN .elk-app -->
|
||||
<div class="elk-app">
|
||||
<!-- BEGIN .elk-wrap -->
|
||||
<div class="elk-wrap">
|
||||
<!-- BEGIN .elk-header -->
|
||||
<header class="elk-header ">
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a>
|
||||
<a class="dropdown-item active" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END: .elk-header -->
|
||||
|
||||
<!-- BEGIN .elk-container -->
|
||||
<div class="elk-container flex-column flex-md-row">
|
||||
<!-- BEGIN .elk-side -->
|
||||
<aside class="elk-side is-open bg-light border-right position-relative" id="elk-side">
|
||||
|
||||
<!-- BEGIN .elk-side-content -->
|
||||
<div class="elk-side-content ">
|
||||
<!-- BEGIN .elk-side-nav -->
|
||||
<nav class="elk-side-nav">
|
||||
|
||||
<ul class="nav flex-column" id="menu1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#getting-started">Getting Started</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#install">Install</a>
|
||||
<a class="nav-link" href="#download">Download</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#usage">Usage</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#stopping-list-opening-on-certain-elements">Stopping list opening on
|
||||
certain
|
||||
elements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#options">Options</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item"><a class="nav-link" href="#toggle">toggle</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#dispose">dispose</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#preventdefault">preventDefault</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#triggerelement">triggerElement</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#parenttrigger">parentTrigger</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#submenu">subMenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link text-dark" href="#events">Events</a></li>
|
||||
<li class="nav-item"><a class="nav-link text-dark" href="#migrating-to-v3-from-v2">Migrating to v3 from
|
||||
v2</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
<!-- END: .elk-side-nav -->
|
||||
</div>
|
||||
<!-- END: .elk-side-content -->
|
||||
|
||||
</aside>
|
||||
<!-- END: .elk-side -->
|
||||
<!-- BEGIN .elk-main -->
|
||||
<div class="elk-main">
|
||||
<!-- BEGIN .elk-main-content -->
|
||||
<div class="elk-main-content">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
<h3 id="install">Install</h3>
|
||||
<p>Install with <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
<pre><code class="lang-sh">$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://yarnpkg.com">yarn</a>:</p>
|
||||
<pre><code class="lang-sh">$ yarn <span class="hljs-keyword">add</span><span class="bash"> metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://getcomposer.org/">composer</a></p>
|
||||
<pre><code class="lang-sh">$ composer <span class="hljs-keyword">require</span> onokumus/<span class="hljs-symbol">metismenu:</span>dev-master
|
||||
</code></pre>
|
||||
<h3 id="download">Download</h3>
|
||||
<p><a href="https://github.com/onokumus/metisMenu/archive/master.zip">download</a></p>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Include metismenu StyleSheet</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include jQuery</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include metisMenu plugin's code</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Add id attribute to unordered list</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Make expand/collapse controls accessible</p>
|
||||
<blockquote>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the element <code>a</code>. 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
|
||||
<code>aria-expanded="false"</code>.
|
||||
If you've set the collapsible element's parent <code>li</code> element to be open by
|
||||
default
|
||||
using
|
||||
the <code>mm-active</code> class, set <code>aria-expanded="true"</code> on the
|
||||
control
|
||||
instead.
|
||||
The plugin will automatically toggle this attribute based on whether or not the collapsible
|
||||
element has
|
||||
been opened or closed.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Arrow Options</p>
|
||||
<blockquote>
|
||||
<p>add <code>has-arrow</code> class to <code>a</code> element</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the plugin:</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu();
|
||||
</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 id="stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</h3>
|
||||
<p>Setting aria-disabled="true" in the <code><a></code> element as shown will stop
|
||||
metisMenu
|
||||
opening the menu for that particular list. This can be changed dynamically and will be obeyed
|
||||
correctly:</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">"true"</span>></span>List 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
</code></pre>
|
||||
<h2 id="options">Options</h2>
|
||||
<h4 id="toggle">toggle</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<p>For auto collapse support.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">toggle:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="dispose">dispose</h4>
|
||||
<p>Type: <code>String</code>
|
||||
Default: <code>null</code></p>
|
||||
<p>For stop and destroy metisMenu.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
</code></pre>
|
||||
<h4 id="preventdefault">preventDefault</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<blockquote>
|
||||
<p>Prevents or allows dropdowns' onclick events after expanding/collapsing.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#menu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">preventDefault:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<p><em>since from version 2.7.0</em></p>
|
||||
<h4 id="triggerelement">triggerElement</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>a</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
triggerElement: <span class="hljs-string">'.nav-link'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="parenttrigger">parentTrigger</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>li</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
parentTrigger: <span class="hljs-string">'.nav-item'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="submenu">subMenu</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>ul</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
subMenu: <span class="hljs-string">'.nav.flex-column'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="events">Events</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><strong>Event Type</strong></th>
|
||||
<th><strong>Description</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.metisMenu</td>
|
||||
<td>This event fires immediately when the <code>_show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been made visible to the
|
||||
user (will
|
||||
wait
|
||||
for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.metisMenu</td>
|
||||
<td>This event is fired immediately when the <code>_hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been hidden from the user
|
||||
(will wait
|
||||
for
|
||||
CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="migrating-to-v3-from-v2">Migrating to v3 from v2</h2>
|
||||
<ul>
|
||||
<li>Update <code>metisMenu.js</code> & <code>metisMenu.css</code> files</li>
|
||||
<li>Change <code>active</code> class to <code>mm-active</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: .elk-main-content -->
|
||||
</div>
|
||||
<!-- END: .elk-main -->
|
||||
</div>
|
||||
<!-- END: .elk-container -->
|
||||
</div>
|
||||
<!-- END: .elk-wrap -->
|
||||
|
||||
</div>
|
||||
<!-- END: .elk-app -->
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('#menu1').metisMenu();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - events</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Event</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-event.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Event</h5>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu()
|
||||
.on(<span class="hljs-string">'show.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'shown.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'hide.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'hidden.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-event.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,603 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - events 2</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css"/>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Events</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-event2.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li class="mm-active">
|
||||
<a href="#" aria-expanded="true">
|
||||
<span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
|
||||
<span class="sidebar-nav-item">metisMenu</span>
|
||||
<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 1<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 1</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 2<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 3<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 3</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 4<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 4</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 5<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 5</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Events
|
||||
<small>Thanks <a href="http://callmecavs.com/jump.js/" target="_blank">callmecavs</a> for jump.js</small>
|
||||
</h5>
|
||||
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>)
|
||||
.metisMenu()
|
||||
.on(<span class="hljs-string">'shown.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
Jump(<span class="hljs-string">"#menu"</span>)
|
||||
});
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jump.js"></script>
|
||||
<script src="assets/js/mm-event2.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - FAQ</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-faq.css">
|
||||
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Faq</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-faq.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-faq.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">FAQ <small>metisMenu version 2.7.x</small></h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="metismenu faq-menu">
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 1</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 2</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 3</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'.faq-menu'</span>).metisMenu({
|
||||
<span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">triggerElement</span>: <span class="hljs-string">'.faq-link'</span>,
|
||||
<span class="hljs-attr">parentTrigger</span>: <span class="hljs-string">'.faq-item'</span>,
|
||||
<span class="hljs-attr">subMenu</span>: <span class="hljs-string">'.faq-answer'</span>
|
||||
});
|
||||
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/js/mm-faq.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - folder view</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-folder.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Folder View</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-folder.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-folder.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<nav class="nav">
|
||||
<ul class="metisFolder metismenu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Root
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
|
||||
Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
|
||||
Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF2
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Folder View <small>default</small></h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'.metisFolder'</span>).metisMenu({
|
||||
<span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span>
|
||||
});
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-folder.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - horizontal menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-horizontal.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Horizontal Menu <small class="text-muted">responsive</small></h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-horizontal.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-horizontal.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<header class="mb-5 pb-5">
|
||||
<div class="pb-5">
|
||||
<h3>Clickable & Responsive <small>default</small></h3>
|
||||
<nav class="topbar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="pt-3 pb-5 mb-5">
|
||||
<h3>Hoverable for Desktop & Responsive</h3>
|
||||
<nav class="topbar-nav is-hoverable">
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script src="assets/js/mm-horizontal.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - hoverable</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-vertical-hover.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Hoverable Vertical Menu</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical-hover.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-vertical-hover.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hoverable Vertical Menu</h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-vertical-hover.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,380 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - vertical menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Vertical Menu</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-vertical.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<aside class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Auto Collapse <small>default</small></h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">No Collapse</h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu({ <span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span> });
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="row text-right" dir="rtl">
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="rtlh3">RTL SUPPORT <small>RTL</small></h5>
|
||||
<div dir="ltr">
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">dir</span>=<span class="hljs-string">"rtl"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu3'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu3">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="assets/js/mm-vertical.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+334
@@ -0,0 +1,334 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||||
|
||||
var $ = _interopDefault(require('jquery'));
|
||||
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
var Util = function ($) {
|
||||
// eslint-disable-line no-shadow
|
||||
var TRANSITION_END = 'transitionend';
|
||||
var Util = {
|
||||
// eslint-disable-line no-shadow
|
||||
TRANSITION_END: 'mmTransitionEnd',
|
||||
triggerTransitionEnd: function triggerTransitionEnd(element) {
|
||||
$(element).trigger(TRANSITION_END);
|
||||
},
|
||||
supportsTransitionEnd: function supportsTransitionEnd() {
|
||||
return Boolean(TRANSITION_END);
|
||||
}
|
||||
};
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: TRANSITION_END,
|
||||
delegateType: TRANSITION_END,
|
||||
handle: function handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
var _this = this;
|
||||
|
||||
var called = false;
|
||||
$(this).one(Util.TRANSITION_END, function () {
|
||||
called = true;
|
||||
});
|
||||
setTimeout(function () {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(_this);
|
||||
}
|
||||
}, duration);
|
||||
return this;
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
$.fn.mmEmulateTransitionEnd = transitionEndEmulator; // eslint-disable-line no-param-reassign
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
|
||||
setTransitionEndSupport();
|
||||
return Util;
|
||||
}($);
|
||||
|
||||
var NAME = 'metisMenu';
|
||||
var DATA_KEY = 'metisMenu';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 350;
|
||||
var Default = {
|
||||
toggle: true,
|
||||
preventDefault: true,
|
||||
triggerElement: 'a',
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul'
|
||||
};
|
||||
var Event = {
|
||||
SHOW: "show" + EVENT_KEY,
|
||||
SHOWN: "shown" + EVENT_KEY,
|
||||
HIDE: "hide" + EVENT_KEY,
|
||||
HIDDEN: "hidden" + EVENT_KEY,
|
||||
CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
var ClassName = {
|
||||
METIS: 'metismenu',
|
||||
ACTIVE: 'mm-active',
|
||||
SHOW: 'mm-show',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
COLLAPSED: 'mm-collapsed'
|
||||
};
|
||||
|
||||
var MetisMenu = /*#__PURE__*/function () {
|
||||
// eslint-disable-line no-shadow
|
||||
function MetisMenu(element, config) {
|
||||
this.element = element;
|
||||
this.config = _extends({}, Default, {}, config);
|
||||
this.transitioning = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
var _proto = MetisMenu.prototype;
|
||||
|
||||
_proto.init = function init() {
|
||||
var self = this;
|
||||
var conf = this.config;
|
||||
var el = $(this.element);
|
||||
el.addClass(ClassName.METIS); // add metismenu class to element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the trigger element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the triggers of all parents
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW);
|
||||
el.find(conf.parentTrigger).not("." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE);
|
||||
el.find(conf.parentTrigger) // .has(conf.subMenu)
|
||||
.children(conf.triggerElement).on(Event.CLICK_DATA_API, function (e) {
|
||||
// eslint-disable-line func-names
|
||||
var eTar = $(this);
|
||||
|
||||
if (eTar.attr('aria-disabled') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conf.preventDefault && eTar.attr('href') === '#') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
var paRent = eTar.parent(conf.parentTrigger);
|
||||
var sibLi = paRent.siblings(conf.parentTrigger);
|
||||
var sibTrigger = sibLi.children(conf.triggerElement);
|
||||
|
||||
if (paRent.hasClass(ClassName.ACTIVE)) {
|
||||
eTar.attr('aria-expanded', 'false');
|
||||
self.removeActive(paRent);
|
||||
} else {
|
||||
eTar.attr('aria-expanded', 'true');
|
||||
self.setActive(paRent);
|
||||
|
||||
if (conf.toggle) {
|
||||
self.removeActive(sibLi);
|
||||
sibTrigger.attr('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
if (conf.onTransitionStart) {
|
||||
conf.onTransitionStart(e);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_proto.setActive = function setActive(li) {
|
||||
$(li).addClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu);
|
||||
|
||||
if (ul.length > 0 && !ul.hasClass(ClassName.SHOW)) {
|
||||
this.show(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.removeActive = function removeActive(li) {
|
||||
$(li).removeClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
|
||||
if (ul.length > 0) {
|
||||
this.hide(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.show = function show(element) {
|
||||
var _this = this;
|
||||
|
||||
if (this.transitioning || $(element).hasClass(ClassName.COLLAPSING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.SHOW);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
|
||||
if (this.config.toggle) {
|
||||
var toggleElem = elem.parent(this.config.parentTrigger).siblings().children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
this.hide(toggleElem);
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING).height(0);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this.config || !_this.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW).height('');
|
||||
|
||||
_this.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.SHOWN);
|
||||
};
|
||||
|
||||
elem.height(element[0].scrollHeight).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
};
|
||||
|
||||
_proto.hide = function hide(element) {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.transitioning || !$(element).hasClass(ClassName.SHOW)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.HIDE);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).removeClass(ClassName.ACTIVE); // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
elem.height(elem.height())[0].offsetHeight;
|
||||
elem.addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this2.config || !_this2.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_this2.transitioning && _this2.config.onTransitionEnd) {
|
||||
_this2.config.onTransitionEnd();
|
||||
}
|
||||
|
||||
_this2.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.HIDDEN);
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE);
|
||||
};
|
||||
|
||||
if (elem.height() === 0 || elem.css('display') === 'none') {
|
||||
complete();
|
||||
} else {
|
||||
elem.height(0).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.setTransitioning = function setTransitioning(isTransitioning) {
|
||||
this.transitioning = isTransitioning;
|
||||
};
|
||||
|
||||
_proto.dispose = function dispose() {
|
||||
$.removeData(this.element, DATA_KEY);
|
||||
$(this.element).find(this.config.parentTrigger) // .has(this.config.subMenu)
|
||||
.children(this.config.triggerElement).off(Event.CLICK_DATA_API);
|
||||
this.transitioning = null;
|
||||
this.config = null;
|
||||
this.element = null;
|
||||
};
|
||||
|
||||
MetisMenu.jQueryInterface = function jQueryInterface(config) {
|
||||
// eslint-disable-next-line func-names
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY);
|
||||
|
||||
var conf = _extends({}, Default, {}, $this.data(), {}, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new MetisMenu(this, conf);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error("No method named \"" + config + "\"");
|
||||
}
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return MetisMenu;
|
||||
}();
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
$.fn[NAME] = MetisMenu.jQueryInterface; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].Constructor = MetisMenu; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].noConflict = function () {
|
||||
// eslint-disable-line no-param-reassign
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT; // eslint-disable-line no-param-reassign
|
||||
|
||||
return MetisMenu.jQueryInterface;
|
||||
};
|
||||
|
||||
module.exports = MetisMenu;
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/
|
||||
.metismenu .arrow {
|
||||
float: right;
|
||||
line-height: 1.42857;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .arrow {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Bootstrap 3.x
|
||||
* https://github.com/twbs/bootstrap
|
||||
*/
|
||||
|
||||
.metismenu .glyphicon.arrow:before {
|
||||
content: "\e079";
|
||||
}
|
||||
.metismenu .mm-active > a > .glyphicon.arrow:before {
|
||||
content: "\e114";
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Font-Awesome
|
||||
* http://fortawesome.github.io/Font-Awesome/
|
||||
*/
|
||||
|
||||
.metismenu .fa.arrow:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.arrow:before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Ionicons
|
||||
* http://ionicons.com/
|
||||
*/
|
||||
|
||||
.metismenu .ion.arrow:before {
|
||||
content: "\f3d2"
|
||||
}
|
||||
.metismenu .mm-active > a > .ion.arrow:before {
|
||||
content: "\f3d0";
|
||||
}
|
||||
.metismenu .plus-times {
|
||||
float: right;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .plus-times {
|
||||
float: left;
|
||||
}
|
||||
.metismenu .fa.plus-times:before {
|
||||
content: "\f067";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.plus-times {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.metismenu .plus-minus {
|
||||
float: right;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .plus-minus {
|
||||
float: left;
|
||||
}
|
||||
.metismenu .fa.plus-minus:before {
|
||||
content: "\f067";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.plus-minus:before {
|
||||
content: "\f068";
|
||||
}
|
||||
.metismenu .mm-collapse:not(.mm-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metismenu .mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .35s;
|
||||
transition-property: height, visibility;
|
||||
}
|
||||
|
||||
.metismenu .has-arrow {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.metismenu .has-arrow::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
border-width: 1px 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
border-color: initial;
|
||||
right: 1em;
|
||||
transform: rotate(-45deg) translate(0, -50%);
|
||||
transform-origin: top;
|
||||
top: 50%;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .metismenu .has-arrow::after {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
transform: rotate(135deg) translate(0, -50%);
|
||||
}
|
||||
|
||||
.metismenu .mm-active > .has-arrow::after,
|
||||
.metismenu .has-arrow[aria-expanded="true"]::after {
|
||||
transform: rotate(-135deg) translate(0, -50%);
|
||||
}
|
||||
|
||||
*[dir="rtl"] .metismenu .mm-active > .has-arrow::after,
|
||||
*[dir="rtl"] .metismenu .has-arrow[aria-expanded="true"]::after {
|
||||
transform: rotate(225deg) translate(0, -50%);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=metisMenu.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["<no source>","../src/metisMenu.css"],"names":[],"mappings":"AAAA;;;;;;EAAA;ACAA;EACE,YAAY;EACZ,oBAAoB;AACtB;AACA;EACE,WAAW;AACb;;AAEA;;;CAGC;;AAED;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;;AAEA;;;CAGC;;AAED;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;;AAEA;;;CAGC;;AAED;EACE;AACF;AACA;EACE,gBAAgB;AAClB;AACA;EACE,YAAY;AACd;AACA;EACE,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,YAAY;AACd;AACA;EACE,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;EAChB,gCAAgC;EAChC,yBAAyB;EACzB,uCAAuC;AACzC;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,YAAY;EACZ,yBAAyB;EACzB,mBAAmB;EACnB,0BAAqB;EAArB,qBAAqB;EACrB,UAAU;EACV,4CAA4C;EAC5C,qBAAqB;EACrB,QAAQ;EACR,4BAA4B;AAC9B;;AAEA;EACE,WAAW;EACX,SAAS;EACT,4CAA4C;AAC9C;;AAEA;;EAEE,6CAA6C;AAC/C;;AAEA;;EAEE,4CAA4C;AAC9C","file":"metisMenu.css","sourcesContent":[null,".metismenu .arrow {\n float: right;\n line-height: 1.42857;\n}\n*[dir=\"rtl\"] .metismenu .arrow {\n float: left;\n}\n\n/*\n * Require Bootstrap 3.x\n * https://github.com/twbs/bootstrap\n*/\n\n.metismenu .glyphicon.arrow:before {\n content: \"\\e079\";\n}\n.metismenu .mm-active > a > .glyphicon.arrow:before {\n content: \"\\e114\";\n}\n\n/*\n * Require Font-Awesome\n * http://fortawesome.github.io/Font-Awesome/\n*/\n\n.metismenu .fa.arrow:before {\n content: \"\\f104\";\n}\n.metismenu .mm-active > a > .fa.arrow:before {\n content: \"\\f107\";\n}\n\n/*\n * Require Ionicons\n * http://ionicons.com/\n*/\n\n.metismenu .ion.arrow:before {\n content: \"\\f3d2\"\n}\n.metismenu .mm-active > a > .ion.arrow:before {\n content: \"\\f3d0\";\n}\n.metismenu .plus-times {\n float: right;\n}\n*[dir=\"rtl\"] .metismenu .plus-times {\n float: left;\n}\n.metismenu .fa.plus-times:before {\n content: \"\\f067\";\n}\n.metismenu .mm-active > a > .fa.plus-times {\n transform: rotate(45deg);\n}\n.metismenu .plus-minus {\n float: right;\n}\n*[dir=\"rtl\"] .metismenu .plus-minus {\n float: left;\n}\n.metismenu .fa.plus-minus:before {\n content: \"\\f067\";\n}\n.metismenu .mm-active > a > .fa.plus-minus:before {\n content: \"\\f068\";\n}\n.metismenu .mm-collapse:not(.mm-show) {\n display: none;\n}\n\n.metismenu .mm-collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition-timing-function: ease;\n transition-duration: .35s;\n transition-property: height, visibility;\n}\n\n.metismenu .has-arrow {\n position: relative;\n}\n\n.metismenu .has-arrow::after {\n position: absolute;\n content: '';\n width: .5em;\n height: .5em;\n border-width: 1px 0 0 1px;\n border-style: solid;\n border-color: initial;\n right: 1em;\n transform: rotate(-45deg) translate(0, -50%);\n transform-origin: top;\n top: 50%;\n transition: all .3s ease-out;\n}\n\n*[dir=\"rtl\"] .metismenu .has-arrow::after {\n right: auto;\n left: 1em;\n transform: rotate(135deg) translate(0, -50%);\n}\n\n.metismenu .mm-active > .has-arrow::after,\n.metismenu .has-arrow[aria-expanded=\"true\"]::after {\n transform: rotate(-135deg) translate(0, -50%);\n}\n\n*[dir=\"rtl\"] .metismenu .mm-active > .has-arrow::after,\n*[dir=\"rtl\"] .metismenu .has-arrow[aria-expanded=\"true\"]::after {\n transform: rotate(225deg) translate(0, -50%);\n}\n"]}
|
||||
+339
@@ -0,0 +1,339 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
|
||||
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
|
||||
(global = global || self, global.metisMenu = factory(global.jQuery));
|
||||
}(this, (function ($) { 'use strict';
|
||||
|
||||
$ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
|
||||
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
var Util = function ($) {
|
||||
// eslint-disable-line no-shadow
|
||||
var TRANSITION_END = 'transitionend';
|
||||
var Util = {
|
||||
// eslint-disable-line no-shadow
|
||||
TRANSITION_END: 'mmTransitionEnd',
|
||||
triggerTransitionEnd: function triggerTransitionEnd(element) {
|
||||
$(element).trigger(TRANSITION_END);
|
||||
},
|
||||
supportsTransitionEnd: function supportsTransitionEnd() {
|
||||
return Boolean(TRANSITION_END);
|
||||
}
|
||||
};
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: TRANSITION_END,
|
||||
delegateType: TRANSITION_END,
|
||||
handle: function handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
var _this = this;
|
||||
|
||||
var called = false;
|
||||
$(this).one(Util.TRANSITION_END, function () {
|
||||
called = true;
|
||||
});
|
||||
setTimeout(function () {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(_this);
|
||||
}
|
||||
}, duration);
|
||||
return this;
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
$.fn.mmEmulateTransitionEnd = transitionEndEmulator; // eslint-disable-line no-param-reassign
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
|
||||
setTransitionEndSupport();
|
||||
return Util;
|
||||
}($);
|
||||
|
||||
var NAME = 'metisMenu';
|
||||
var DATA_KEY = 'metisMenu';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 350;
|
||||
var Default = {
|
||||
toggle: true,
|
||||
preventDefault: true,
|
||||
triggerElement: 'a',
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul'
|
||||
};
|
||||
var Event = {
|
||||
SHOW: "show" + EVENT_KEY,
|
||||
SHOWN: "shown" + EVENT_KEY,
|
||||
HIDE: "hide" + EVENT_KEY,
|
||||
HIDDEN: "hidden" + EVENT_KEY,
|
||||
CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
var ClassName = {
|
||||
METIS: 'metismenu',
|
||||
ACTIVE: 'mm-active',
|
||||
SHOW: 'mm-show',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
COLLAPSED: 'mm-collapsed'
|
||||
};
|
||||
|
||||
var MetisMenu = /*#__PURE__*/function () {
|
||||
// eslint-disable-line no-shadow
|
||||
function MetisMenu(element, config) {
|
||||
this.element = element;
|
||||
this.config = _extends({}, Default, {}, config);
|
||||
this.transitioning = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
var _proto = MetisMenu.prototype;
|
||||
|
||||
_proto.init = function init() {
|
||||
var self = this;
|
||||
var conf = this.config;
|
||||
var el = $(this.element);
|
||||
el.addClass(ClassName.METIS); // add metismenu class to element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the trigger element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the triggers of all parents
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW);
|
||||
el.find(conf.parentTrigger).not("." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE);
|
||||
el.find(conf.parentTrigger) // .has(conf.subMenu)
|
||||
.children(conf.triggerElement).on(Event.CLICK_DATA_API, function (e) {
|
||||
// eslint-disable-line func-names
|
||||
var eTar = $(this);
|
||||
|
||||
if (eTar.attr('aria-disabled') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conf.preventDefault && eTar.attr('href') === '#') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
var paRent = eTar.parent(conf.parentTrigger);
|
||||
var sibLi = paRent.siblings(conf.parentTrigger);
|
||||
var sibTrigger = sibLi.children(conf.triggerElement);
|
||||
|
||||
if (paRent.hasClass(ClassName.ACTIVE)) {
|
||||
eTar.attr('aria-expanded', 'false');
|
||||
self.removeActive(paRent);
|
||||
} else {
|
||||
eTar.attr('aria-expanded', 'true');
|
||||
self.setActive(paRent);
|
||||
|
||||
if (conf.toggle) {
|
||||
self.removeActive(sibLi);
|
||||
sibTrigger.attr('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
if (conf.onTransitionStart) {
|
||||
conf.onTransitionStart(e);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_proto.setActive = function setActive(li) {
|
||||
$(li).addClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu);
|
||||
|
||||
if (ul.length > 0 && !ul.hasClass(ClassName.SHOW)) {
|
||||
this.show(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.removeActive = function removeActive(li) {
|
||||
$(li).removeClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
|
||||
if (ul.length > 0) {
|
||||
this.hide(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.show = function show(element) {
|
||||
var _this = this;
|
||||
|
||||
if (this.transitioning || $(element).hasClass(ClassName.COLLAPSING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.SHOW);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
|
||||
if (this.config.toggle) {
|
||||
var toggleElem = elem.parent(this.config.parentTrigger).siblings().children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
this.hide(toggleElem);
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING).height(0);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this.config || !_this.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW).height('');
|
||||
|
||||
_this.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.SHOWN);
|
||||
};
|
||||
|
||||
elem.height(element[0].scrollHeight).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
};
|
||||
|
||||
_proto.hide = function hide(element) {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.transitioning || !$(element).hasClass(ClassName.SHOW)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.HIDE);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).removeClass(ClassName.ACTIVE); // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
elem.height(elem.height())[0].offsetHeight;
|
||||
elem.addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this2.config || !_this2.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_this2.transitioning && _this2.config.onTransitionEnd) {
|
||||
_this2.config.onTransitionEnd();
|
||||
}
|
||||
|
||||
_this2.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.HIDDEN);
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE);
|
||||
};
|
||||
|
||||
if (elem.height() === 0 || elem.css('display') === 'none') {
|
||||
complete();
|
||||
} else {
|
||||
elem.height(0).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.setTransitioning = function setTransitioning(isTransitioning) {
|
||||
this.transitioning = isTransitioning;
|
||||
};
|
||||
|
||||
_proto.dispose = function dispose() {
|
||||
$.removeData(this.element, DATA_KEY);
|
||||
$(this.element).find(this.config.parentTrigger) // .has(this.config.subMenu)
|
||||
.children(this.config.triggerElement).off(Event.CLICK_DATA_API);
|
||||
this.transitioning = null;
|
||||
this.config = null;
|
||||
this.element = null;
|
||||
};
|
||||
|
||||
MetisMenu.jQueryInterface = function jQueryInterface(config) {
|
||||
// eslint-disable-next-line func-names
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY);
|
||||
|
||||
var conf = _extends({}, Default, {}, $this.data(), {}, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new MetisMenu(this, conf);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error("No method named \"" + config + "\"");
|
||||
}
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return MetisMenu;
|
||||
}();
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
$.fn[NAME] = MetisMenu.jQueryInterface; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].Constructor = MetisMenu; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].noConflict = function () {
|
||||
// eslint-disable-line no-param-reassign
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT; // eslint-disable-line no-param-reassign
|
||||
|
||||
return MetisMenu.jQueryInterface;
|
||||
};
|
||||
|
||||
return MetisMenu;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=metisMenu.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/.metismenu .arrow{float:right;line-height:1.42857}[dir=rtl] .metismenu .arrow{float:left}.metismenu .glyphicon.arrow:before{content:"\e079"}.metismenu .mm-active>a>.glyphicon.arrow:before{content:"\e114"}.metismenu .fa.arrow:before{content:"\f104"}.metismenu .mm-active>a>.fa.arrow:before{content:"\f107"}.metismenu .ion.arrow:before{content:"\f3d2"}.metismenu .mm-active>a>.ion.arrow:before{content:"\f3d0"}.metismenu .plus-times{float:right}[dir=rtl] .metismenu .plus-times{float:left}.metismenu .fa.plus-times:before{content:"\f067"}.metismenu .mm-active>a>.fa.plus-times{transform:rotate(45deg)}.metismenu .plus-minus{float:right}[dir=rtl] .metismenu .plus-minus{float:left}.metismenu .fa.plus-minus:before{content:"\f067"}.metismenu .mm-active>a>.fa.plus-minus:before{content:"\f068"}.metismenu .mm-collapse:not(.mm-show){display:none}.metismenu .mm-collapsing{position:relative;height:0;overflow:hidden;transition-timing-function:ease;transition-duration:.35s;transition-property:height,visibility}.metismenu .has-arrow{position:relative}.metismenu .has-arrow:after{position:absolute;content:"";width:.5em;height:.5em;border-style:solid;border-width:1px 0 0 1px;border-color:initial;right:1em;transform:rotate(-45deg) translateY(-50%);transform-origin:top;top:50%;transition:all .3s ease-out}[dir=rtl] .metismenu .has-arrow:after{right:auto;left:1em;transform:rotate(135deg) translateY(-50%)}.metismenu .has-arrow[aria-expanded=true]:after,.metismenu .mm-active>.has-arrow:after{transform:rotate(-135deg) translateY(-50%)}[dir=rtl] .metismenu .has-arrow[aria-expanded=true]:after,[dir=rtl] .metismenu .mm-active>.has-arrow:after{transform:rotate(225deg) translateY(-50%)}
|
||||
/*# sourceMappingURL=metisMenu.min.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["<no source>","../src/metisMenu.css"],"names":[],"mappings":"AAAA;;;;;;EAAA,ACAA,kBACE,WAAY,CACZ,mBACF,CACA,4BACE,UACF,CAOA,mCACE,eACF,CACA,gDACE,eACF,CAOA,4BACE,eACF,CACA,yCACE,eACF,CAOA,6BACE,eACF,CACA,0CACE,eACF,CACA,uBACE,WACF,CACA,iCACE,UACF,CACA,iCACE,eACF,CACA,uCACE,uBACF,CACA,uBACE,WACF,CACA,iCACE,UACF,CACA,iCACE,eACF,CACA,8CACE,eACF,CACA,sCACE,YACF,CAEA,0BACE,iBAAkB,CAClB,QAAS,CACT,eAAgB,CAChB,+BAAgC,CAChC,wBAAyB,CACzB,qCACF,CAEA,sBACE,iBACF,CAEA,4BACE,iBAAkB,CAClB,UAAW,CACX,UAAW,CACX,WAAY,CAGZ,kBAAqB,CAArB,wBAAqB,CAArB,oBAAqB,CACrB,SAAU,CACV,yCAA4C,CAC5C,oBAAqB,CACrB,OAAQ,CACR,2BACF,CAEA,sCACE,UAAW,CACX,QAAS,CACT,yCACF,CAEA,uFAEE,0CACF,CAEA,2GAEE,yCACF","file":"metisMenu.min.css","sourcesContent":[null,".metismenu .arrow {\n float: right;\n line-height: 1.42857;\n}\n*[dir=\"rtl\"] .metismenu .arrow {\n float: left;\n}\n\n/*\n * Require Bootstrap 3.x\n * https://github.com/twbs/bootstrap\n*/\n\n.metismenu .glyphicon.arrow:before {\n content: \"\\e079\";\n}\n.metismenu .mm-active > a > .glyphicon.arrow:before {\n content: \"\\e114\";\n}\n\n/*\n * Require Font-Awesome\n * http://fortawesome.github.io/Font-Awesome/\n*/\n\n.metismenu .fa.arrow:before {\n content: \"\\f104\";\n}\n.metismenu .mm-active > a > .fa.arrow:before {\n content: \"\\f107\";\n}\n\n/*\n * Require Ionicons\n * http://ionicons.com/\n*/\n\n.metismenu .ion.arrow:before {\n content: \"\\f3d2\"\n}\n.metismenu .mm-active > a > .ion.arrow:before {\n content: \"\\f3d0\";\n}\n.metismenu .plus-times {\n float: right;\n}\n*[dir=\"rtl\"] .metismenu .plus-times {\n float: left;\n}\n.metismenu .fa.plus-times:before {\n content: \"\\f067\";\n}\n.metismenu .mm-active > a > .fa.plus-times {\n transform: rotate(45deg);\n}\n.metismenu .plus-minus {\n float: right;\n}\n*[dir=\"rtl\"] .metismenu .plus-minus {\n float: left;\n}\n.metismenu .fa.plus-minus:before {\n content: \"\\f067\";\n}\n.metismenu .mm-active > a > .fa.plus-minus:before {\n content: \"\\f068\";\n}\n.metismenu .mm-collapse:not(.mm-show) {\n display: none;\n}\n\n.metismenu .mm-collapsing {\n position: relative;\n height: 0;\n overflow: hidden;\n transition-timing-function: ease;\n transition-duration: .35s;\n transition-property: height, visibility;\n}\n\n.metismenu .has-arrow {\n position: relative;\n}\n\n.metismenu .has-arrow::after {\n position: absolute;\n content: '';\n width: .5em;\n height: .5em;\n border-width: 1px 0 0 1px;\n border-style: solid;\n border-color: initial;\n right: 1em;\n transform: rotate(-45deg) translate(0, -50%);\n transform-origin: top;\n top: 50%;\n transition: all .3s ease-out;\n}\n\n*[dir=\"rtl\"] .metismenu .has-arrow::after {\n right: auto;\n left: 1em;\n transform: rotate(135deg) translate(0, -50%);\n}\n\n.metismenu .mm-active > .has-arrow::after,\n.metismenu .has-arrow[aria-expanded=\"true\"]::after {\n transform: rotate(-135deg) translate(0, -50%);\n}\n\n*[dir=\"rtl\"] .metismenu .mm-active > .has-arrow::after,\n*[dir=\"rtl\"] .metismenu .has-arrow[aria-expanded=\"true\"]::after {\n transform: rotate(225deg) translate(0, -50%);\n}\n"]}
|
||||
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/
|
||||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],n):(e=e||self).metisMenu=n(e.jQuery)}(this,function(o){"use strict";function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var i,n,r,s=(n="transitionend",r={TRANSITION_END:"mmTransitionEnd",triggerTransitionEnd:function(e){i(e).trigger(n)},supportsTransitionEnd:function(){return Boolean(n)}},(i=o).fn.mmEmulateTransitionEnd=e,i.event.special[r.TRANSITION_END]={bindType:n,delegateType:n,handle:function(e){if(i(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}},r);function e(e){var n=this,t=!1;return i(this).one(r.TRANSITION_END,function(){t=!0}),setTimeout(function(){t||r.triggerTransitionEnd(n)},e),this}var t="metisMenu",g="metisMenu",l="."+g,h=o.fn[t],f={toggle:!0,preventDefault:!0,triggerElement:"a",parentTrigger:"li",subMenu:"ul"},d={SHOW:"show"+l,SHOWN:"shown"+l,HIDE:"hide"+l,HIDDEN:"hidden"+l,CLICK_DATA_API:"click"+l+".data-api"},u="metismenu",c="mm-active",p="mm-show",m="mm-collapse",T="mm-collapsing",v=function(){function r(e,n){this.element=e,this.config=a({},f,{},n),this.transitioning=null,this.init()}var e=r.prototype;return e.init=function(){var a=this,s=this.config,e=o(this.element);e.addClass(u),e.find(s.parentTrigger+"."+c).children(s.triggerElement).attr("aria-expanded","true"),e.find(s.parentTrigger+"."+c).parents(s.parentTrigger).addClass(c),e.find(s.parentTrigger+"."+c).parents(s.parentTrigger).children(s.triggerElement).attr("aria-expanded","true"),e.find(s.parentTrigger+"."+c).has(s.subMenu).children(s.subMenu).addClass(m+" "+p),e.find(s.parentTrigger).not("."+c).has(s.subMenu).children(s.subMenu).addClass(m),e.find(s.parentTrigger).children(s.triggerElement).on(d.CLICK_DATA_API,function(e){var n=o(this);if("true"!==n.attr("aria-disabled")){s.preventDefault&&"#"===n.attr("href")&&e.preventDefault();var t=n.parent(s.parentTrigger),i=t.siblings(s.parentTrigger),r=i.children(s.triggerElement);t.hasClass(c)?(n.attr("aria-expanded","false"),a.removeActive(t)):(n.attr("aria-expanded","true"),a.setActive(t),s.toggle&&(a.removeActive(i),r.attr("aria-expanded","false"))),s.onTransitionStart&&s.onTransitionStart(e)}})},e.setActive=function(e){o(e).addClass(c);var n=o(e).children(this.config.subMenu);0<n.length&&!n.hasClass(p)&&this.show(n)},e.removeActive=function(e){o(e).removeClass(c);var n=o(e).children(this.config.subMenu+"."+p);0<n.length&&this.hide(n)},e.show=function(e){var n=this;if(!this.transitioning&&!o(e).hasClass(T)){var t=o(e),i=o.Event(d.SHOW);if(t.trigger(i),!i.isDefaultPrevented()){if(t.parent(this.config.parentTrigger).addClass(c),this.config.toggle){var r=t.parent(this.config.parentTrigger).siblings().children(this.config.subMenu+"."+p);this.hide(r)}t.removeClass(m).addClass(T).height(0),this.setTransitioning(!0);t.height(e[0].scrollHeight).one(s.TRANSITION_END,function(){n.config&&n.element&&(t.removeClass(T).addClass(m+" "+p).height(""),n.setTransitioning(!1),t.trigger(d.SHOWN))}).mmEmulateTransitionEnd(350)}}},e.hide=function(e){var n=this;if(!this.transitioning&&o(e).hasClass(p)){var t=o(e),i=o.Event(d.HIDE);if(t.trigger(i),!i.isDefaultPrevented()){t.parent(this.config.parentTrigger).removeClass(c),t.height(t.height())[0].offsetHeight,t.addClass(T).removeClass(m).removeClass(p),this.setTransitioning(!0);var r=function(){n.config&&n.element&&(n.transitioning&&n.config.onTransitionEnd&&n.config.onTransitionEnd(),n.setTransitioning(!1),t.trigger(d.HIDDEN),t.removeClass(T).addClass(m))};0===t.height()||"none"===t.css("display")?r():t.height(0).one(s.TRANSITION_END,r).mmEmulateTransitionEnd(350)}}},e.setTransitioning=function(e){this.transitioning=e},e.dispose=function(){o.removeData(this.element,g),o(this.element).find(this.config.parentTrigger).children(this.config.triggerElement).off(d.CLICK_DATA_API),this.transitioning=null,this.config=null,this.element=null},r.jQueryInterface=function(i){return this.each(function(){var e=o(this),n=e.data(g),t=a({},f,{},e.data(),{},"object"==typeof i&&i?i:{});if(n||(n=new r(this,t),e.data(g,n)),"string"==typeof i){if(void 0===n[i])throw new Error('No method named "'+i+'"');n[i]()}})},r}();return o.fn[t]=v.jQueryInterface,o.fn[t].Constructor=v,o.fn[t].noConflict=function(){return o.fn[t]=h,v.jQueryInterface},v});
|
||||
//# sourceMappingURL=metisMenu.min.js.map
|
||||
File diff suppressed because one or more lines are too long
+330
@@ -0,0 +1,330 @@
|
||||
/*!
|
||||
* metismenu https://github.com/onokumus/metismenu#readme
|
||||
* A jQuery menu plugin
|
||||
* @version 3.0.6
|
||||
* @author Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* @license: MIT
|
||||
*/
|
||||
import $ from 'jquery';
|
||||
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
var Util = function ($) {
|
||||
// eslint-disable-line no-shadow
|
||||
var TRANSITION_END = 'transitionend';
|
||||
var Util = {
|
||||
// eslint-disable-line no-shadow
|
||||
TRANSITION_END: 'mmTransitionEnd',
|
||||
triggerTransitionEnd: function triggerTransitionEnd(element) {
|
||||
$(element).trigger(TRANSITION_END);
|
||||
},
|
||||
supportsTransitionEnd: function supportsTransitionEnd() {
|
||||
return Boolean(TRANSITION_END);
|
||||
}
|
||||
};
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: TRANSITION_END,
|
||||
delegateType: TRANSITION_END,
|
||||
handle: function handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
var _this = this;
|
||||
|
||||
var called = false;
|
||||
$(this).one(Util.TRANSITION_END, function () {
|
||||
called = true;
|
||||
});
|
||||
setTimeout(function () {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(_this);
|
||||
}
|
||||
}, duration);
|
||||
return this;
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
$.fn.mmEmulateTransitionEnd = transitionEndEmulator; // eslint-disable-line no-param-reassign
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
|
||||
setTransitionEndSupport();
|
||||
return Util;
|
||||
}($);
|
||||
|
||||
var NAME = 'metisMenu';
|
||||
var DATA_KEY = 'metisMenu';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 350;
|
||||
var Default = {
|
||||
toggle: true,
|
||||
preventDefault: true,
|
||||
triggerElement: 'a',
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul'
|
||||
};
|
||||
var Event = {
|
||||
SHOW: "show" + EVENT_KEY,
|
||||
SHOWN: "shown" + EVENT_KEY,
|
||||
HIDE: "hide" + EVENT_KEY,
|
||||
HIDDEN: "hidden" + EVENT_KEY,
|
||||
CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY
|
||||
};
|
||||
var ClassName = {
|
||||
METIS: 'metismenu',
|
||||
ACTIVE: 'mm-active',
|
||||
SHOW: 'mm-show',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
COLLAPSED: 'mm-collapsed'
|
||||
};
|
||||
|
||||
var MetisMenu = /*#__PURE__*/function () {
|
||||
// eslint-disable-line no-shadow
|
||||
function MetisMenu(element, config) {
|
||||
this.element = element;
|
||||
this.config = _extends({}, Default, {}, config);
|
||||
this.transitioning = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
var _proto = MetisMenu.prototype;
|
||||
|
||||
_proto.init = function init() {
|
||||
var self = this;
|
||||
var conf = this.config;
|
||||
var el = $(this.element);
|
||||
el.addClass(ClassName.METIS); // add metismenu class to element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the trigger element
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).parents(conf.parentTrigger).children(conf.triggerElement).attr('aria-expanded', 'true'); // add attribute aria-expanded=true the triggers of all parents
|
||||
|
||||
el.find(conf.parentTrigger + "." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW);
|
||||
el.find(conf.parentTrigger).not("." + ClassName.ACTIVE).has(conf.subMenu).children(conf.subMenu).addClass(ClassName.COLLAPSE);
|
||||
el.find(conf.parentTrigger) // .has(conf.subMenu)
|
||||
.children(conf.triggerElement).on(Event.CLICK_DATA_API, function (e) {
|
||||
// eslint-disable-line func-names
|
||||
var eTar = $(this);
|
||||
|
||||
if (eTar.attr('aria-disabled') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conf.preventDefault && eTar.attr('href') === '#') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
var paRent = eTar.parent(conf.parentTrigger);
|
||||
var sibLi = paRent.siblings(conf.parentTrigger);
|
||||
var sibTrigger = sibLi.children(conf.triggerElement);
|
||||
|
||||
if (paRent.hasClass(ClassName.ACTIVE)) {
|
||||
eTar.attr('aria-expanded', 'false');
|
||||
self.removeActive(paRent);
|
||||
} else {
|
||||
eTar.attr('aria-expanded', 'true');
|
||||
self.setActive(paRent);
|
||||
|
||||
if (conf.toggle) {
|
||||
self.removeActive(sibLi);
|
||||
sibTrigger.attr('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
if (conf.onTransitionStart) {
|
||||
conf.onTransitionStart(e);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_proto.setActive = function setActive(li) {
|
||||
$(li).addClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu);
|
||||
|
||||
if (ul.length > 0 && !ul.hasClass(ClassName.SHOW)) {
|
||||
this.show(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.removeActive = function removeActive(li) {
|
||||
$(li).removeClass(ClassName.ACTIVE);
|
||||
var ul = $(li).children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
|
||||
if (ul.length > 0) {
|
||||
this.hide(ul);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.show = function show(element) {
|
||||
var _this = this;
|
||||
|
||||
if (this.transitioning || $(element).hasClass(ClassName.COLLAPSING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.SHOW);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
|
||||
if (this.config.toggle) {
|
||||
var toggleElem = elem.parent(this.config.parentTrigger).siblings().children(this.config.subMenu + "." + ClassName.SHOW);
|
||||
this.hide(toggleElem);
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING).height(0);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this.config || !_this.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE + " " + ClassName.SHOW).height('');
|
||||
|
||||
_this.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.SHOWN);
|
||||
};
|
||||
|
||||
elem.height(element[0].scrollHeight).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
};
|
||||
|
||||
_proto.hide = function hide(element) {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.transitioning || !$(element).hasClass(ClassName.SHOW)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var elem = $(element);
|
||||
var startEvent = $.Event(Event.HIDE);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).removeClass(ClassName.ACTIVE); // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
elem.height(elem.height())[0].offsetHeight;
|
||||
elem.addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW);
|
||||
this.setTransitioning(true);
|
||||
|
||||
var complete = function complete() {
|
||||
// check if disposed
|
||||
if (!_this2.config || !_this2.element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_this2.transitioning && _this2.config.onTransitionEnd) {
|
||||
_this2.config.onTransitionEnd();
|
||||
}
|
||||
|
||||
_this2.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.HIDDEN);
|
||||
elem.removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE);
|
||||
};
|
||||
|
||||
if (elem.height() === 0 || elem.css('display') === 'none') {
|
||||
complete();
|
||||
} else {
|
||||
elem.height(0).one(Util.TRANSITION_END, complete).mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.setTransitioning = function setTransitioning(isTransitioning) {
|
||||
this.transitioning = isTransitioning;
|
||||
};
|
||||
|
||||
_proto.dispose = function dispose() {
|
||||
$.removeData(this.element, DATA_KEY);
|
||||
$(this.element).find(this.config.parentTrigger) // .has(this.config.subMenu)
|
||||
.children(this.config.triggerElement).off(Event.CLICK_DATA_API);
|
||||
this.transitioning = null;
|
||||
this.config = null;
|
||||
this.element = null;
|
||||
};
|
||||
|
||||
MetisMenu.jQueryInterface = function jQueryInterface(config) {
|
||||
// eslint-disable-next-line func-names
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(DATA_KEY);
|
||||
|
||||
var conf = _extends({}, Default, {}, $this.data(), {}, typeof config === 'object' && config ? config : {});
|
||||
|
||||
if (!data) {
|
||||
data = new MetisMenu(this, conf);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error("No method named \"" + config + "\"");
|
||||
}
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return MetisMenu;
|
||||
}();
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
$.fn[NAME] = MetisMenu.jQueryInterface; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].Constructor = MetisMenu; // eslint-disable-line no-param-reassign
|
||||
|
||||
$.fn[NAME].noConflict = function () {
|
||||
// eslint-disable-line no-param-reassign
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT; // eslint-disable-line no-param-reassign
|
||||
|
||||
return MetisMenu.jQueryInterface;
|
||||
};
|
||||
|
||||
export default MetisMenu;
|
||||
@@ -0,0 +1,15 @@
|
||||
Package.describe({
|
||||
name: 'onokumus:metismenu',
|
||||
version: '3.0.6',
|
||||
summary: 'A jQuery menu plugin',
|
||||
git: 'https://github.com/onokumus/metisMenu',
|
||||
documentation: 'README.md'
|
||||
});
|
||||
|
||||
Package.onUse(function(api) {
|
||||
api.use(['jquery@1.11.4']);
|
||||
api.addFiles([
|
||||
"dist/metisMenu.css",
|
||||
"dist/metisMenu.js"
|
||||
], 'client');
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
{
|
||||
"name": "metismenu",
|
||||
"version": "3.0.6",
|
||||
"description": "A jQuery menu plugin",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/modules/index.js",
|
||||
"browser": "dist/metisMenu.js",
|
||||
"unpkg": "dist/metisMenu.min.js",
|
||||
"jsdelivr": "dist/metisMenu.min.js",
|
||||
"typings": "types/metismenu.d.ts",
|
||||
"style": "dist/metisMenu.css",
|
||||
"files": [
|
||||
"dist",
|
||||
"src",
|
||||
"types"
|
||||
],
|
||||
"scripts": {
|
||||
"js:dev": "rollup -c -w",
|
||||
"js:prod": "rollup -c",
|
||||
"js:minify": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/metisMenu.js.map,includeSources,url=metisMenu.min.js.map\" --output dist/metisMenu.min.js dist/metisMenu.js",
|
||||
"css:dev": "postcss src/metisMenu.css -o dist/metisMenu.css --map",
|
||||
"css:min": "cross-env NODE_ENV=production postcss src/metisMenu.css -o dist/metisMenu.min.css --map",
|
||||
"build": "npm run js:prod && npm run js:minify && npm run css:dev && npm run css:min",
|
||||
"test": "eslint src/*.js",
|
||||
"deploy": "gh-pages -d demo"
|
||||
},
|
||||
"repository": "onokumus/metismenu",
|
||||
"keywords": [
|
||||
"accordion",
|
||||
"bootstrap",
|
||||
"jquery",
|
||||
"menu",
|
||||
"metis",
|
||||
"metisMenu",
|
||||
"toggle",
|
||||
"twbs",
|
||||
"twitter"
|
||||
],
|
||||
"author": "Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)",
|
||||
"contributors": [
|
||||
"Rein de Vries <info@reinos.nl> (https://github.com/reinos/)",
|
||||
"Arthur CHAN <arthur@talkgoal.com> (http://catchtop.com)",
|
||||
"Andrew Eastwood (https://github.com/AndrewEastwood)",
|
||||
"Marcelo Tosco <capy.net@gmail.com> (http://ecapy.com)",
|
||||
"Radoslav Štofko (http://www.stoweb.cz)",
|
||||
"Umut Karcı <cediddi@gmail.com> (https://github.com/cediddi)",
|
||||
"Chris Wiggins <chris@wiggins.nz> (https://github.com/chriswiggins)",
|
||||
"Jacob Magnusson <m@jacobian.se> (https://github.com/jmagnusson)",
|
||||
"QQ <sinabs@gmail.com> (https://github.com/sinabs)",
|
||||
"roman <rgnevashev@gmail.com> (https://github.com/rgnevashev)",
|
||||
"diegozhu <zhuhaiyang55@gmail.com> (http://sae.zhuhaiyang.me)",
|
||||
"WoMayr (https://github.com/WoMayr)",
|
||||
"719media (https://github.com/719media)",
|
||||
"Boris Burkov (Boris Burkov)",
|
||||
"Matt Dziuban (http://mattdziuban.com)",
|
||||
"Valerio Belli (https://github.com/DrugoLebowski)",
|
||||
"Diogo Pereira <diogopereira@pereiradiogo.com> (http://pereiradiogo.com)",
|
||||
"Nicolas Igot <nicolasigot@gmail.com> (http://www.igot-web.com)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/onokumus/metismenu/issues"
|
||||
},
|
||||
"homepage": "https://github.com/onokumus/metismenu#readme",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@rollup/plugin-commonjs": "^11.0.2",
|
||||
"@rollup/plugin-node-resolve": "^7.1.1",
|
||||
"@types/jquery": "^3.3.33",
|
||||
"cross-env": "^7.0.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-airbnb-base": "^14.1.0",
|
||||
"eslint-plugin-import": "^2.20.1",
|
||||
"gh-pages": "^2.2.0",
|
||||
"postcss-cli": "^7.1.0",
|
||||
"postcss-header": "^2.0.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"rollup": "^2.1.0",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"uglify-js": "^3.8.0"
|
||||
},
|
||||
"verb": {
|
||||
"toc": {
|
||||
"collapsible": false,
|
||||
"method": "preWrite"
|
||||
},
|
||||
"tasks": [
|
||||
"readme"
|
||||
],
|
||||
"plugins": [
|
||||
"gulp-format-md"
|
||||
],
|
||||
"helpers": [
|
||||
"helper-changelog"
|
||||
],
|
||||
"related": {
|
||||
"list": [
|
||||
"metismenujs",
|
||||
"onoffcanvas"
|
||||
]
|
||||
},
|
||||
"reflinks": [
|
||||
"metismenujs",
|
||||
"chl",
|
||||
"elektron",
|
||||
"onoffcanvas",
|
||||
"twbuttons"
|
||||
]
|
||||
},
|
||||
"peerDependencies": {
|
||||
"jquery": "^3.4.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
const pkg = require('./package.json');
|
||||
|
||||
const banner = `/*!
|
||||
* ${pkg.name} ${pkg.homepage}
|
||||
* ${pkg.description}
|
||||
* @version ${pkg.version}
|
||||
* @author ${pkg.author}
|
||||
* @license: ${pkg.license}
|
||||
*/`;
|
||||
|
||||
|
||||
module.exports = ctx => ({
|
||||
map: ctx.options.map,
|
||||
plugins: {
|
||||
'postcss-header': {
|
||||
header: banner,
|
||||
},
|
||||
'postcss-preset-env': {
|
||||
autoprefixer: {
|
||||
flexbox: 'no-2009'
|
||||
},
|
||||
stage: 3
|
||||
},
|
||||
cssnano: ctx.env === 'production' ? {} : false
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,48 @@
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from 'rollup-plugin-babel';
|
||||
import pkg from './package.json';
|
||||
|
||||
const banner = `/*!
|
||||
* ${pkg.name} ${pkg.homepage}
|
||||
* ${pkg.description}
|
||||
* @version ${pkg.version}
|
||||
* @author ${pkg.author}
|
||||
* @license: ${pkg.license}
|
||||
*/`;
|
||||
|
||||
|
||||
export default [
|
||||
{
|
||||
input: 'src/index.js',
|
||||
external: ['jquery'],
|
||||
output: [
|
||||
{
|
||||
name: 'metisMenu',
|
||||
banner,
|
||||
globals: {
|
||||
jquery: 'jQuery',
|
||||
},
|
||||
file: pkg.browser,
|
||||
format: 'umd',
|
||||
sourcemap: true,
|
||||
},
|
||||
{
|
||||
file: pkg.main,
|
||||
banner,
|
||||
format: 'cjs',
|
||||
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
banner,
|
||||
format: 'es',
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
babel({ exclude: 'node_modules/**' }),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,293 @@
|
||||
import $ from 'jquery';
|
||||
import Util from './util';
|
||||
|
||||
const NAME = 'metisMenu';
|
||||
const DATA_KEY = 'metisMenu';
|
||||
const EVENT_KEY = `.${DATA_KEY}`;
|
||||
const DATA_API_KEY = '.data-api';
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
const TRANSITION_DURATION = 350;
|
||||
|
||||
const Default = {
|
||||
toggle: true,
|
||||
preventDefault: true,
|
||||
triggerElement: 'a',
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul',
|
||||
};
|
||||
|
||||
const Event = {
|
||||
SHOW: `show${EVENT_KEY}`,
|
||||
SHOWN: `shown${EVENT_KEY}`,
|
||||
HIDE: `hide${EVENT_KEY}`,
|
||||
HIDDEN: `hidden${EVENT_KEY}`,
|
||||
CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`,
|
||||
};
|
||||
|
||||
const ClassName = {
|
||||
METIS: 'metismenu',
|
||||
ACTIVE: 'mm-active',
|
||||
SHOW: 'mm-show',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
COLLAPSED: 'mm-collapsed',
|
||||
};
|
||||
|
||||
class MetisMenu {
|
||||
// eslint-disable-line no-shadow
|
||||
constructor(element, config) {
|
||||
this.element = element;
|
||||
this.config = {
|
||||
...Default,
|
||||
...config,
|
||||
};
|
||||
this.transitioning = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const self = this;
|
||||
const conf = this.config;
|
||||
const el = $(this.element);
|
||||
|
||||
el.addClass(ClassName.METIS); // add metismenu class to element
|
||||
|
||||
el.find(`${conf.parentTrigger}.${ClassName.ACTIVE}`)
|
||||
.children(conf.triggerElement)
|
||||
.attr('aria-expanded', 'true'); // add attribute aria-expanded=true the trigger element
|
||||
|
||||
el.find(`${conf.parentTrigger}.${ClassName.ACTIVE}`)
|
||||
.parents(conf.parentTrigger)
|
||||
.addClass(ClassName.ACTIVE);
|
||||
|
||||
el.find(`${conf.parentTrigger}.${ClassName.ACTIVE}`)
|
||||
.parents(conf.parentTrigger)
|
||||
.children(conf.triggerElement)
|
||||
.attr('aria-expanded', 'true'); // add attribute aria-expanded=true the triggers of all parents
|
||||
|
||||
el.find(`${conf.parentTrigger}.${ClassName.ACTIVE}`)
|
||||
.has(conf.subMenu)
|
||||
.children(conf.subMenu)
|
||||
.addClass(`${ClassName.COLLAPSE} ${ClassName.SHOW}`);
|
||||
|
||||
el
|
||||
.find(conf.parentTrigger)
|
||||
.not(`.${ClassName.ACTIVE}`)
|
||||
.has(conf.subMenu)
|
||||
.children(conf.subMenu)
|
||||
.addClass(ClassName.COLLAPSE);
|
||||
|
||||
el
|
||||
.find(conf.parentTrigger)
|
||||
// .has(conf.subMenu)
|
||||
.children(conf.triggerElement)
|
||||
.on(Event.CLICK_DATA_API, function (e) { // eslint-disable-line func-names
|
||||
const eTar = $(this);
|
||||
|
||||
if (eTar.attr('aria-disabled') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conf.preventDefault && eTar.attr('href') === '#') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const paRent = eTar.parent(conf.parentTrigger);
|
||||
const sibLi = paRent.siblings(conf.parentTrigger);
|
||||
const sibTrigger = sibLi.children(conf.triggerElement);
|
||||
|
||||
if (paRent.hasClass(ClassName.ACTIVE)) {
|
||||
eTar.attr('aria-expanded', 'false');
|
||||
self.removeActive(paRent);
|
||||
} else {
|
||||
eTar.attr('aria-expanded', 'true');
|
||||
self.setActive(paRent);
|
||||
if (conf.toggle) {
|
||||
self.removeActive(sibLi);
|
||||
sibTrigger.attr('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
if (conf.onTransitionStart) {
|
||||
conf.onTransitionStart(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setActive(li) {
|
||||
$(li).addClass(ClassName.ACTIVE);
|
||||
const ul = $(li).children(this.config.subMenu);
|
||||
if (ul.length > 0 && !ul.hasClass(ClassName.SHOW)) {
|
||||
this.show(ul);
|
||||
}
|
||||
}
|
||||
|
||||
removeActive(li) {
|
||||
$(li).removeClass(ClassName.ACTIVE);
|
||||
const ul = $(li).children(`${this.config.subMenu}.${ClassName.SHOW}`);
|
||||
if (ul.length > 0) {
|
||||
this.hide(ul);
|
||||
}
|
||||
}
|
||||
|
||||
show(element) {
|
||||
if (this.transitioning || $(element).hasClass(ClassName.COLLAPSING)) {
|
||||
return;
|
||||
}
|
||||
const elem = $(element);
|
||||
|
||||
const startEvent = $.Event(Event.SHOW);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).addClass(ClassName.ACTIVE);
|
||||
|
||||
if (this.config.toggle) {
|
||||
const toggleElem = elem.parent(this.config.parentTrigger).siblings().children(`${this.config.subMenu}.${ClassName.SHOW}`);
|
||||
this.hide(toggleElem);
|
||||
}
|
||||
|
||||
elem
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
.height(0);
|
||||
|
||||
this.setTransitioning(true);
|
||||
|
||||
const complete = () => {
|
||||
// check if disposed
|
||||
if (!this.config || !this.element) {
|
||||
return;
|
||||
}
|
||||
elem
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(`${ClassName.COLLAPSE} ${ClassName.SHOW}`)
|
||||
.height('');
|
||||
|
||||
this.setTransitioning(false);
|
||||
|
||||
elem.trigger(Event.SHOWN);
|
||||
};
|
||||
|
||||
elem
|
||||
.height(element[0].scrollHeight)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
|
||||
hide(element) {
|
||||
if (
|
||||
this.transitioning || !$(element).hasClass(ClassName.SHOW)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const elem = $(element);
|
||||
|
||||
const startEvent = $.Event(Event.HIDE);
|
||||
elem.trigger(startEvent);
|
||||
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.parent(this.config.parentTrigger).removeClass(ClassName.ACTIVE);
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
elem.height(elem.height())[0].offsetHeight;
|
||||
|
||||
elem
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.removeClass(ClassName.SHOW);
|
||||
|
||||
this.setTransitioning(true);
|
||||
|
||||
const complete = () => {
|
||||
// check if disposed
|
||||
if (!this.config || !this.element) {
|
||||
return;
|
||||
}
|
||||
if (this.transitioning && this.config.onTransitionEnd) {
|
||||
this.config.onTransitionEnd();
|
||||
}
|
||||
|
||||
this.setTransitioning(false);
|
||||
elem.trigger(Event.HIDDEN);
|
||||
|
||||
elem
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE);
|
||||
};
|
||||
|
||||
if (elem.height() === 0 || elem.css('display') === 'none') {
|
||||
complete();
|
||||
} else {
|
||||
elem
|
||||
.height(0)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.mmEmulateTransitionEnd(TRANSITION_DURATION);
|
||||
}
|
||||
}
|
||||
|
||||
setTransitioning(isTransitioning) {
|
||||
this.transitioning = isTransitioning;
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this.element, DATA_KEY);
|
||||
|
||||
$(this.element)
|
||||
.find(this.config.parentTrigger)
|
||||
// .has(this.config.subMenu)
|
||||
.children(this.config.triggerElement)
|
||||
.off(Event.CLICK_DATA_API);
|
||||
|
||||
this.transitioning = null;
|
||||
this.config = null;
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
static jQueryInterface(config) {
|
||||
// eslint-disable-next-line func-names
|
||||
return this.each(function () {
|
||||
const $this = $(this);
|
||||
let data = $this.data(DATA_KEY);
|
||||
const conf = {
|
||||
...Default,
|
||||
...$this.data(),
|
||||
...(typeof config === 'object' && config ? config : {}),
|
||||
};
|
||||
|
||||
if (!data) {
|
||||
data = new MetisMenu(this, conf);
|
||||
$this.data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (data[config] === undefined) {
|
||||
throw new Error(`No method named "${config}"`);
|
||||
}
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = MetisMenu.jQueryInterface; // eslint-disable-line no-param-reassign
|
||||
$.fn[NAME].Constructor = MetisMenu; // eslint-disable-line no-param-reassign
|
||||
$.fn[NAME].noConflict = () => {
|
||||
// eslint-disable-line no-param-reassign
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT; // eslint-disable-line no-param-reassign
|
||||
return MetisMenu.jQueryInterface;
|
||||
};
|
||||
|
||||
export default MetisMenu;
|
||||
@@ -0,0 +1,114 @@
|
||||
.metismenu .arrow {
|
||||
float: right;
|
||||
line-height: 1.42857;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .arrow {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Bootstrap 3.x
|
||||
* https://github.com/twbs/bootstrap
|
||||
*/
|
||||
|
||||
.metismenu .glyphicon.arrow:before {
|
||||
content: "\e079";
|
||||
}
|
||||
.metismenu .mm-active > a > .glyphicon.arrow:before {
|
||||
content: "\e114";
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Font-Awesome
|
||||
* http://fortawesome.github.io/Font-Awesome/
|
||||
*/
|
||||
|
||||
.metismenu .fa.arrow:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.arrow:before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
/*
|
||||
* Require Ionicons
|
||||
* http://ionicons.com/
|
||||
*/
|
||||
|
||||
.metismenu .ion.arrow:before {
|
||||
content: "\f3d2"
|
||||
}
|
||||
.metismenu .mm-active > a > .ion.arrow:before {
|
||||
content: "\f3d0";
|
||||
}
|
||||
.metismenu .plus-times {
|
||||
float: right;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .plus-times {
|
||||
float: left;
|
||||
}
|
||||
.metismenu .fa.plus-times:before {
|
||||
content: "\f067";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.plus-times {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.metismenu .plus-minus {
|
||||
float: right;
|
||||
}
|
||||
*[dir="rtl"] .metismenu .plus-minus {
|
||||
float: left;
|
||||
}
|
||||
.metismenu .fa.plus-minus:before {
|
||||
content: "\f067";
|
||||
}
|
||||
.metismenu .mm-active > a > .fa.plus-minus:before {
|
||||
content: "\f068";
|
||||
}
|
||||
.metismenu .mm-collapse:not(.mm-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metismenu .mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .35s;
|
||||
transition-property: height, visibility;
|
||||
}
|
||||
|
||||
.metismenu .has-arrow {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.metismenu .has-arrow::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
border-width: 1px 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: initial;
|
||||
right: 1em;
|
||||
transform: rotate(-45deg) translate(0, -50%);
|
||||
transform-origin: top;
|
||||
top: 50%;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
*[dir="rtl"] .metismenu .has-arrow::after {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
transform: rotate(135deg) translate(0, -50%);
|
||||
}
|
||||
|
||||
.metismenu .mm-active > .has-arrow::after,
|
||||
.metismenu .has-arrow[aria-expanded="true"]::after {
|
||||
transform: rotate(-135deg) translate(0, -50%);
|
||||
}
|
||||
|
||||
*[dir="rtl"] .metismenu .mm-active > .has-arrow::after,
|
||||
*[dir="rtl"] .metismenu .has-arrow[aria-expanded="true"]::after {
|
||||
transform: rotate(225deg) translate(0, -50%);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import $ from 'jquery';
|
||||
|
||||
const Util = (($) => { // eslint-disable-line no-shadow
|
||||
const TRANSITION_END = 'transitionend';
|
||||
|
||||
const Util = { // eslint-disable-line no-shadow
|
||||
TRANSITION_END: 'mmTransitionEnd',
|
||||
|
||||
triggerTransitionEnd(element) {
|
||||
$(element).trigger(TRANSITION_END);
|
||||
},
|
||||
|
||||
supportsTransitionEnd() {
|
||||
return Boolean(TRANSITION_END);
|
||||
},
|
||||
};
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: TRANSITION_END,
|
||||
delegateType: TRANSITION_END,
|
||||
handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event
|
||||
.handleObj
|
||||
.handler
|
||||
.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
let called = false;
|
||||
|
||||
$(this).one(Util.TRANSITION_END, () => {
|
||||
called = true;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(this);
|
||||
}
|
||||
}, duration);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
$.fn.mmEmulateTransitionEnd = transitionEndEmulator; // eslint-disable-line no-param-reassign
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
|
||||
setTransitionEndSupport();
|
||||
|
||||
return Util;
|
||||
})($);
|
||||
|
||||
export default Util;
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
// Type definitions for metisMenu 3.0
|
||||
// Project: http://github.com/onokumus/metisMenu
|
||||
// Definitions by: onokumus <https://github.com/onokumus/>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference types="jquery"/>
|
||||
|
||||
interface MetisMenuOptions {
|
||||
toggle?: boolean;
|
||||
preventDefault?: boolean;
|
||||
triggerElement?: string;
|
||||
parentTrigger?: string;
|
||||
subMenu?: string;
|
||||
}
|
||||
|
||||
type MetisMenuEvents = "show.metisMenu" | "shown.metisMenu" | "hide.metisMenu" | "hidden.metisMenu";
|
||||
|
||||
interface JQuery {
|
||||
metisMenu(options?: MetisMenuOptions | "dispose"): JQuery;
|
||||
on(events: MetisMenuEvents, handler: (eventObject: JQueryEventObject) => any): JQuery;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user