npm 包 meny 使用教程

简介

Meny 是一个基于 JavaScript 的轻量级侧边栏导航库，它可以方便地实现一个漂亮的、响应式的、可定制化的导航菜单。Meny 提供了很多丰富的配置选项和 API 接口，以适应各种场景下的需求。

安装和使用

安装

安装 Meny 的最简单方法是使用 npm 安装：

npm install meny --save

如果你不想使用 npm ，也可以直接下载后使用。

使用

在 HTML 文件中引入 CSS 样式表和 JS 代码：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ----------- ------------
    ----- ---------------- ---------------- ---- -- --- --- ---
-------
------
    ---- --------- ---
    ------- ----------------------- ---- -- -- -- ---
-------
-------

在 JS 代码中初始化 Meny 实例：

var meny = Meny.create({
    // 配置选项
});

配置选项

Meny 提供了很多可配置的选项，以满足不同场景下的需求。以下是常用选项的介绍。

menuElement

菜单元素的 DOM 对象或选择器。默认值是 '#menu' 。

var meny = Meny.create({
    menuElement: '#my-menu'
});

contentsElement

内容元素的 DOM 对象或选择器。默认值是 '#contents' 。

var meny = Meny.create({
    contentsElement: '#my-contents'
});

position

菜单位置。可以是 left （左侧）、 right （右侧）、 top （顶部）或 bottom （底部）。默认值是 'left' 。

var meny = Meny.create({
    position: 'right'
});

width

菜单宽度。可以是像素值或百分比值。默认值是 '300px' 。

var meny = Meny.create({
    width: '25%'
});

height

菜单高度。可以是像素值或百分比值。默认值是 '100%' 。

var meny = Meny.create({
    height: '80%'
});

threshold

触发菜单打开的鼠标移动距离阈值。默认值是 40 。

var meny = Meny.create({
    threshold: 50
});

overlap

内容区域是否与菜单重叠。默认值是 false 。

var meny = Meny.create({
    overlap: true
});

更多选项请参考 Meny 官方文档。

API 接口

Meny 提供了很多可调用的 API 接口，以实现一些高级功能。以下是常用接口的介绍。

open()

打开菜单。

var meny = Meny.create({
    // 配置选项
});
meny.open();

close()

关闭菜单。

var meny = Meny.create({
    // 配置选项
});
meny.close();

isOpen()

判断菜单是否已经打开。

var meny = Meny.create({
    // 配置选项
});
if (meny.isOpen()) {
    // 菜单已经打开
} else {
    // 菜单未打开
}

setPosition(position)

设置菜单位置。position 可以是 left （左侧）、 right （右侧）、 top （顶部）或 bottom （底部）。

var meny = Meny.create({
    // 配置选项
});
meny.setPosition('right');

更多接口请参考 Meny 官方文档。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34228