# metisMenu
[![NPM version](https://badge.fury.io/js/metismenu.svg)](http://badge.fury.io/js/metismenu)
[![Bower version](https://badge.fury.io/bo/metisMenu.svg)](http://badge.fury.io/bo/metisMenu)
[![PHP version](https://badge.fury.io/ph/onokumus%2Fmetismenu.svg)](http://badge.fury.io/ph/onokumus%2Fmetismenu)
[![Build Status](https://secure.travis-ci.org/onokumus/metisMenu.svg?branch=master)](https://travis-ci.org/onokumus/metisMenu)
> A jQuery menu plugin
## TOC
- [Installation](#installation)
* [Download](#download)
* [React](#react)
* [TypeScript type definitions](#typescript-type-definitions)
- [Usage](#usage)
* [Stopping list opening on certain elements](#stopping-list-opening-on-certain-elements)
- [Options](#options)
+ [toggle](#toggle)
+ [activeClass](#activeclass)
+ [collapseClass](#collapseclass)
+ [collapseInClass](#collapseinclass)
+ [collapsingClass](#collapsingclass)
+ [doubleTapToGo](#doubletaptogo)
+ [preventDefault](#preventdefault)
- [Events](#events)
- [Testing](#testing)
- [Demo](#demo)
- [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))_
## Installation
Install with [npm](https://www.npmjs.com/):
```sh
$ npm install metismenu
```
Install with [bower](http://bower.io/)
```sh
$ bower install metisMenu
```
Install with [composer](https://getcomposer.org/)
```sh
$ composer require onokumus/metismenu:dev-master
```
### Download
[download](https://github.com/onokumus/metisMenu/archive/master.zip)
### React
See [react-metismenu](https://github.com/alpertuna/react-metismenu)
### TypeScript type definitions
Install TSD globally using npm:
```bash
$ npm install tsd -g
```
Install metismenu TypeScript definition file
```bash
$ tsd install metismenu
```
## Usage
1. Include metisMenu StyleSheet
```html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
```
OR
```html
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.metisMenu/2.5.2/metisMenu.min.css">
```
2. Include jQuery
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
```
OR
```html
<script src="//cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
```
3. Include metisMenu plugin's code
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
```
OR
```html
<script src="//cdn.jsdelivr.net/jquery.metisMenu/2.5.2/metisMenu.min.js"></script>
```
4. Add class `metisMenu` to unordered list
```html
<ul class="metisMenu" id="menu">
</ul>
```
5. Make expand/collapse controls accessible
> Be sure to add `aria-expanded` to the element `a` and the following `ul`. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element's parent `li` element to be open by default using the `active` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
```html
<ul class="metisMenu" id="menu">
<li class="active">
<a href="#" aria-expanded="true">Menu 1</a>
<ul aria-expanded="true">
...
</ul>
</li>
<li>
<a href="#" aria-expanded="false">Menu 2</a>
<ul aria-expanded="false">
...
</ul>
</li>
...
</ul>
```
6. Call the plugin:
```javascript
$("#menu").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
$("#menu").metisMenu({
toggle: false
});
```
#### activeClass
Type: `String`
Default: `active`
```javascript
$("#menu").metisMenu({
activeClass: 'active'
});
```
#### collapseClass
Type: `String`
Default: `collapse`
```javascript
$("#menu").metisMenu({
collapseClass: 'collapse'
});
```
#### collapseInClass
Type: `String`
Default: `in`
```javascript
$("#menu").metisMenu({
collapseInClass: 'in'
});
```
#### collapsingClass
Type: `String`
Default: `collapsing`
```javascript
$("#menu").metisMenu({
collapsingClass: 'collapsing'
});
```
#### doubleTapToGo
Type: `Boolean`
Default: `false`
For double tap support.
```javascript
$("#menu").metisMenu({
doubleTapToGo: true
});
```
#### preventDefault
Type: `Boolean`
Default: `true`
Prevents or allows dropdowns' onclick events after expanding/collapsing.
```javascript
$("#menu").metisMenu({
preventDefault: false
});
```
## 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).|
## Testing
```sh
$ npm install
$ bower install
$ grunt serve
```
## Demo
[http://mm.onokumus.com](http://mm.onokumus.com)
Contains a simple HTML file to demonstrate metisMenu plugin.
## Release History
|**DATE** |**VERSION** |**CHANGES**|
|--------------|--------------|-----------|
|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 Okumuş**
+ [github/onokumus](https://github.com/onokumus)
+ [twitter/onokumus](http://twitter.com/onokumus)
## License
Copyright © 2016, [Osman Nuri Okumuş](https://github.com/onokumus).ş
Released under the [MIT license](https://github.com/onokumus/metismenu/blob/master/LICENSE).
***
_This file was generated by [verb](https://github.com/verbose/verb), v0.9.0, on May 30, 2016._
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
<项目介绍> 基于PHP+MYSQL开发的二手汽车销售网站+后台管理系统+源代码+文档说明 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------
资源推荐
资源详情
资源评论
收起资源包目录
基于PHP+MYSQL实现的二手汽车销售网站+后台管理系统+源代码+文档说明(96分课程大作业) (796个子文件)
222 625KB
3245 119KB
amazeui.flat.css 325KB
amazeui.css 324KB
amazeui.flat.min.css 250KB
amazeui.min.css 249KB
bootstrap.css 134KB
bootstrap.min.css 111KB
animate.css 71KB
animate.css 71KB
bootstrap-theme.css 21KB
bootstrap-theme.min.css 19KB
jquery-confirm.css 13KB
admin.css 5KB
index.css 4KB
list.css 3KB
header_footer.css 2KB
presonal_center.css 2KB
metisMenu.css 2KB
metisMenu.min.css 1KB
demo.css 1KB
metisMenu.css 1KB
index.css 1KB
mini.css 917B
about_us.css 894B
metisFolder.css 645B
login.css 370B
app.css 23B
fontawesome-webfont.eot 75KB
glyphicons-halflings-regular.eot 20KB
.gitattributes 237B
.gitignore 560B
admin-table.html 23KB
admin-index.html 18KB
index.html 15KB
admin-form.html 12KB
widget.basic.html 12KB
widget.html 11KB
animate.html 10KB
admin-log.html 10KB
admin-gallery.html 10KB
admin-user.html 10KB
blog.html 10KB
non-responsive.html 10KB
sidebar.html 9KB
list.html 9KB
landing.html 9KB
hover.html 8KB
index.html 8KB
admin-help.html 7KB
event.html 7KB
metisFolder.html 7KB
iscroll.html 6KB
admin-404.html 6KB
presonal_center.html 5KB
index.html 5KB
mini.html 5KB
edit_goods.html 4KB
goods_form.html 4KB
sort.html 4KB
ad_list.html 4KB
add_goods.html 4KB
goods.html 4KB
about_us.html 4KB
zurb.html 3KB
admin_form.html 3KB
vip_order.html 3KB
vip_data.html 3KB
header.html 2KB
login.html 2KB
ad_list_form.html 2KB
login.html 2KB
admin.html 2KB
index.html 1KB
footer.html 490B
bg5.jpg 4.85MB
20170426230543778.jpg 713KB
20170426230210957.jpg 582KB
20170506173507402.jpg 494KB
20170506173734905.jpg 383KB
20170506173538325.jpg 374KB
luying5.jpg 368KB
20170506173648553.jpg 277KB
20170426230618565.jpg 259KB
20170426230041521.jpg 259KB
20170507150054575.jpg 235KB
20170507150054865.jpg 224KB
20170507150054306.jpg 215KB
20170507150054961.jpg 210KB
mmexport1490959601627.jpg 199KB
20170507153111365.jpg 195KB
20170507152413990.jpg 194KB
2017050715241329.jpg 190KB
20170507152205718.jpg 185KB
20170507152206339.jpg 185KB
20170507145524418.jpg 183KB
20170507152206455.jpg 182KB
img4.jpg 179KB
20170507152205724.jpg 178KB
20170507152700763.jpg 177KB
共 796 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
机智的程序员zero
- 粉丝: 1954
- 资源: 4202
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功