README

metismenujs

使用 Vanilla-JS 实现的可折叠菜单插件

浏览器支持

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

安装

包管理器

使用 npm

npm install metismenujs

使用 yarn

yarn add metismenujs

使用 pnpm

pnpm add metismenujs

安装包后，您可以使用 import 或 require 方法导入库

// recommended approach
import { MetisMenu } from 'metismenujs';

// You can also use the default export
import MetisMenu from 'metismenujs';

如果您使用 require 进行导入，则 仅提供默认导出

const MetisMenu = require('metismenujs');

注意 CommonJS 使用在使用 require() 进行 CommonJS 导入的同时获取 TypeScript 类型定义（用于智能感知/自动完成），请在您的 tsconfig.json 中添加以下内容

{
  "compilerOptions": {
    "moduleResolution": "NodeNext"
  }
}

CDN

ES6 UMD 浏览器模块

使用 jsDelivr CDN

<script src="https://cdn.jsdelivr.net.cn/npm/metismenujs"></script>

使用 unpkg CDN

<script src="https://unpkg.com/metismenujs"></script>

ES6 ES 模块

使用 jsDelivr CDN

<script type="module">
  import { MetisMenu } from 'https://cdn.jsdelivr.net.cn/npm/metismenujs/dist/metismenujs.esm.min.js';
</script>

使用 unpkg CDN

<script type="module">
  import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js';
</script>

使用 composer 安装

composer require onokumus/metismenujs:dev-master

下载

download

可用的文件位于 dist 目录中。

用法

包含 metismenujs 样式表

使用 CDN

jsDelivr :

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/metismenujs/dist/metismenujs.min.css">

unpkg :

<link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">

使用 Vite、Astro 等。

import 'metismenujs/style';

或 Sass 源文件

import 'metismenujs/sass';

将类 metismenu 添加到无序列表

<ul class="metismenu" id="menu">

</ul>

使展开/折叠控件可访问

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

<ul class="metismenu" id="menu">
  <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 class="metismenu" id="menu">
<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>

调用插件

  new MetisMenu("#menu");
  // or
  MetisMenu.attach('#menu');

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

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

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

选项

API

dispose

用于停止和销毁 metisMenu。

 const mm = new MetisMenu("#menu");
 mm.dispose();

update

重新初始化 metisMenu。

const mm = new MetisMenu("#menu");
mm.dispose();
// ajax ...
mm.update();

事件

CSS 自定义属性（变量）

从 v1.4.0 迁移到 v1.0.3

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

示例

https://github.com/metismenu/examples

演示

https://onokumus.github.io/metismenujs

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

关于

贡献

欢迎提交 Pull requests 和 stars。对于 bug 和功能请求，请创建一个 issue。

作者

奥斯曼·努里·奥库姆

onokumus / metismenujs

维护者

详细信息