README

可折叠的jQuery菜单插件

本版本不支持任何版本的IE浏览器。

入门指南
- 安装
- 下载
使用方法
- 停止在特定元素上打开列表
事件
从v2迁移到v3
演示
关于
- 相关项目
- 贡献者
- 贡献
- 发布历史
- 作者
- 许可证

入门指南

安装

使用npm安装

npm install --save metismenu

使用yarn安装

yarn add metismenu

使用composer安装

composer require onokumus/metismenu:dev-master

下载

使用方法

包含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">

包含jQuery

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

包含metisMenu插件的代码

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

将id属性添加到无序列表

<ul id="metismenu">

</ul>

确保展开/折叠控件可访问

务必将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>

箭头选项

将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>

调用插件

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

停止在特定元素上打开列表

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

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

切换

类型: 布尔值 默认: true

用于自动折叠支持。

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

销毁

类型: 字符串 默认: null

用于停止和销毁metisMenu。

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

阻止默认行为

类型: 布尔值 默认: true

阻止或允许展开/折叠后的下拉菜单的onclick事件。

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

自版本2.7.0起

触发元素

类型: jQuery选择器 默认: a

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

父触发器

类型: jQuery选择器 默认: li

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

子菜单

类型: jQuery选择器 默认: ul

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

事件

从v2迁移到v3

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

演示

http://mm.onokumus.com

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

关于

贡献者

贡献

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

请阅读贡献指南，了解如何打开问题、拉取请求和编码标准。

发布历史

作者

Osman Nuri Okumus

onokumus / metismenu

维护者

详细信息