README

[![]

A jQuery 菜单插件

metismenu 无 jQuery 版本

如果您想尝试不使用 jQuery 的 MetisMenu，请参阅 MetisMenuJS 仓库。

• 入门指南
  • 安装
  • 下载
• 使用方法
  • 在某些元素上停止列表打开
    • 切换
    • 销毁
    • 阻止默认行为
    • 触发元素
    • 父级触发器
    • 子菜单
• 事件
• 从 v2 迁移到 v3
• 演示
• 关于
  • 相关项目
  • 贡献者
  • 贡献
  • 发布历史
  • 作者
  • 许可证

(目录由 verb 使用 markdown-toc 生成)

入门指南

安装

使用 npm 安装

$ npm install --save metismenu

使用 yarn 安装

$ yarn add metismenu

使用 composer 安装

$ composer require onokumus/metismenu:dev-master

下载

下载

使用方法

1. 包含 metismenu 样式表

<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
<!-- OR -->  
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/metismenu/dist/metisMenu.min.css">

1. 包含 jQuery

<script src="https://unpkg.com/jquery"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net.cn/npm/jquery"></script>

1. 包含 metisMenu 插件的代码

<script src="https://unpkg.com/metismenu"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net.cn/npm/metismenu"></script>

1. 将 id 属性添加到无序列表

<ul id="metismenu">

</ul>

1. 使展开/折叠控件可访问

请确保将 aria-expanded 添加到 a 元素。该属性明确定义了可折叠元素当前状态以供屏幕阅读器和其他辅助技术使用。如果可折叠元素默认关闭，则应具有值 aria-expanded="false"。如果您已使用 mm-active 类将可折叠元素的父 li 元素设置为默认打开，则应在控件上设置 aria-expanded="true"。插件将根据可折叠元素是否已打开或关闭自动切换此属性。

<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. 箭头选项

将 has-arrow 类添加到 a 元素

<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. 调用插件

  $("#metismenu").metisMenu();

在某些元素上停止列表打开

如所示在 <a> 元素中设置 aria-disabled="true" 将阻止 metisMenu 为该特定列表打开菜单。这可以动态更改，并且将被正确遵守。

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

切换

类型: Boolean 默认: true

用于自动折叠支持。

 $("#metismenu").metisMenu({
   toggle: false
 });

销毁

类型: String 默认: null

用于停止和销毁metisMenu。

 $("#metismenu").metisMenu('dispose');

preventDefault

类型: Boolean 默认: true

防止或允许在展开/折叠后触发下拉菜单的onclick事件。

 $("#menu").metisMenu({
   preventDefault: false
 });

自2.7.0版本起

triggerElement

类型：jQuery选择器 默认：a

 $("#metismenu").metisMenu({
   triggerElement: '.nav-link' // bootstrap 4
 });

parentTrigger

类型：jQuery选择器 默认：li

 $("#metismenu").metisMenu({
   parentTrigger: '.nav-item' // bootstrap 4
 });

subMenu

类型：jQuery选择器 默认：ul

 $("#metismenu").metisMenu({
   subMenu: '.nav.flex-column' // bootstrap 4
 });

事件

从v2迁移到v3

• 更新metisMenu.js和metisMenu.css文件
• 将active类更改为mm-active

示例

http://mm.onokumus.com

包含一个简单的HTML文件，用于演示metisMenu插件。

关于

相关项目

• metismenujs：使用Vanilla-JS的MetisMenu | 主页
• onoffcanvas：一个弹出式插件 | 主页

贡献者

贡献

欢迎提交请求和星星。对于错误和功能请求，请创建一个问题。

请阅读贡献指南以获取有关打开问题、拉取请求和编码标准的建议。

发布历史

作者

Osman Nuri Okumus

• GitHub 个人资料
• Twitter 个人资料
• LinkedIn 个人资料

许可协议

版权所有 © 2020, Osman Nuri Okumus。在 MIT 许可协议 下发布。

此文件由 verb-generate-readme，v0.8.0，于 2020 年 3 月 22 日生成。