简介
npm 是 JavaScript 的包管理器，并提供了众多的开源包供开发者使用。其中一个 npm 包 menus 可以用于构建自定义的网站菜单。这个包非常容易使用，同时也提供了许多自定义选项。
安装
menus 包可以通过 npm 安装，安装命令：
npm install menus --save
使用
menus 包提供了两种方式来构建菜单：使用 HTML 或者使用 JavaScript。
HTML
使用 HTML 构建菜单的方式非常简单。您只需要在 HTML 文件中添加下面的代码：
-- -------------------- ---- -------
-----------
---- -------------
----
------ ----------------------
------ ----------------------
------ -------------------------
-----
------
----------
-------
----- -
----------------- --------
-------- -----
-
----- -- -
---------------- -----
------- --
-------- --
-
----- -- -
-------- -------------
------------- -----
-
----- - -
------ -----
---------------- -----
-
----- ------- -
------ -----
-
--------这个代码将创建一个简单的菜单。
JavaScript
使用 JavaScript 构建菜单的方式更加灵活，在这种方式中，您可以使用 menus 包提供的许多选项来自定义菜单。下面是一个简单的示例：
-- -------------------- ---- -------
-- ----------
------ - ----- -------- - ---- --------
----- ---- - --- ------
--- --------
---------- -------------
------ -
--- ----------
----- -------
---- ----
---
--- ----------
----- -------
---- ----
---
--- ----------
----- ----------
---- ----
---
--
---
-- ---
----- -
----------------- --------
-------- -----
-
----- -- -
---------------- -----
------- --
-------- --
-
----- -- -
-------- -------------
------------- -----
-
----- - -
------ -----
---------------- -----
-
----- ------- -
------ -----
-这个代码将创建一个与上一个示例相同的菜单。
自定义选项
menus 包提供了许多自定义选项，您可以使用这些选项来自定义您的菜单。下面是一些示例：
direction
这个选项可以用来设置菜单的方向。可以选择 “horizontal” 或 “vertical”，默认为 “horizontal”：
const menu = new Menu({
el: '#menu',
direction: 'vertical',
// ...
});items
这个选项用于设置菜单中的项。您可以为菜单添加任意数量的项：
-- -------------------- ---- -------
----- ---- - --- ------
--- --------
------ -
--- ----------
----- -------
---- ----
---
--- ----------
----- -------
---- ----
---
--- ----------
----- ----------
---- ----
---
--
---nested
这个选项用于设置是否允许嵌套菜单：
const menu = new Menu({
el: '#menu',
nested: true,
// ...
});总结
menus 是一个非常好用的 npm 包，可以用于构建自定义的网站菜单。您可以使用 HTML 或 JavaScript 方式来创建菜单，并使用许多自定义选项来定制您的菜单。如果您正在构建网站，menus 包是您不容错过的一个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bc9