在开发前端的过程中，我们经常需要使用一些第三方库来实现各种功能，而 npm 是一个方便、易用的包管理工具。本文介绍了一个 npm 包 jquery.easymenu 的使用教程，该包提供了一个简单易用的菜单功能，可以方便地添加到网站中。
安装
首先需要先安装 jQuery，然后使用 npm 安装 jquery.easymenu：
npm install jquery.easymenu
或者通过 CDN 直接引入：
<script src="https://cdn.jsdelivr.net/npm/jquery.easymenu/dist/jquery.easymenu.min.js"></script>
使用方法
在 HTML 文件中引用 jQuery 和 jquery.easymenu：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="./node_modules/jquery.easymenu/dist/jquery.easymenu.min.js"></script>
然后添加一段 JavaScript 代码来初始化菜单：
-- -------------------- ---- -------
------------ -
---------------------
---------- -
- ----- ------- ---- --- --
- ----- -------- ---- -------- --
- ----- ---------- ---- ---------- -
-
---
---其中，#menu 是菜单根元素的 ID，menuItems 是菜单项的配置数组，每个菜单项包含 text 和 url 两个属性。
在 HTML 中添加菜单根元素：
<div id="menu"></div>
这样就完成了一个简单的菜单的初始化。
配置项
jquery.easymenu 可以通过多种配置项来定制菜单的样式和功能，下面介绍一些常用的配置项。
menuItems
菜单项的配置数组，每个对象包含 text 和 url 两个属性，分别表示菜单项的文本和链接。
{
menuItems: [
{ text: "Home", url: "/" },
{ text: "About", url: "/about" },
{ text: "Contact", url: "/contact" }
]
}menuClass
菜单根元素的 CSS 类名，默认为 easymenu。
{
menuClass: "my-menu"
}menuItemClass
每个菜单项的 CSS 类名，默认为 easymenu-item。
{
menuItemClass: "my-menu-item"
}activeClass
表示当前菜单项的 CSS 类名，默认为 active。
{
activeClass: "my-active"
}subMenuClass
子菜单的 CSS 类名，默认为 easymenu-submenu。
{
subMenuClass: "my-submenu"
}subMenuArrowClass
子菜单箭头的 CSS 类名，默认为 easymenu-submenu-arrow fa fa-caret-right。
{
subMenuArrowClass: "my-submenu-arrow fa fa-angle-right"
}openSubMenuOnHover
鼠标悬浮在菜单项上时是否展开子菜单，布尔值，默认为 true。
{
openSubMenuOnHover: false
}closeSubMenuOnClick
点击菜单项时是否收起子菜单，布尔值，默认为 false。
{
closeSubMenuOnClick: true
}示例代码
下面是一个完整的示例代码，可以复制到本地运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
-- ------- --
-------- - -------- ------------- -
------------- - -------- ------------- -------- --- ----- -
---------- - ----------------- ----- -
----------- - -------- ----- --------- --------- ---- ----- ----- -- -
----------------- - ------------ ----- -
--------
-------
------
---- ----------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------
--------
------------ -
---------------------
---------- -
- ----- ------- ---- --- --
- ----- -------- ---- -------- --
-
----- -----------
------------- -
- ----- -------- --- ---- ----------- --
- ----- -------- --- ---- ----------- --
- ----- -------- --- ---- ----------- -
-
--
- ----- ---------- ---- ---------- -
--
------------------- -----
-------------------- -----
------------------ ----------------- -- ---------------
---
---
---------
-------
-------希望这篇文章可以帮助你学习和使用 jquery.easymenu，尽情发挥它的功能吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dde11