前言
jQuery.mmenu 是一个支持移动端的侧边栏菜单插件，能够实现非常漂亮的滑动效果。本文将介绍如何使用 npm 包管理器来安装和使用 jQuery.mmenu。
安装
首先，在您的项目目录下打开终端，执行以下命令：
npm install jquery.mmenu --save
这将会下载最新版本的 jQuery.mmenu，并将其加入到 package.json 的依赖列表中。
然后，在您的 HTML 文件中引入依赖项：
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery.mmenu/dist/jquery.mmenu.all.js"></script> <link href="node_modules/jquery.mmenu/dist/jquery.mmenu.all.css" rel="stylesheet" />
初始化
接下来，您需要初始化并配置 jQuery.mmenu。在调用 mmenu() 函数之前，您需要将 HTML 标记结构编写好。
在下面的示例中，我们将构建一个基本的侧边栏菜单，其中包含三个链接。该菜单将位于网页的左侧，当用户点击汉堡按钮时，菜单将滑出。
-- -------------------- ---- -------
---- -------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
------- -------------------------然后，在您的 JavaScript 文件中添加以下代码：
-- -------------------- ---- -------
---------------------------- -
---------------------
------------- -
----------------
---------------
--
------------ -
----------- ------
--
--------- -
-------- --- -----
-
---
-------------------------------- -
---------------------------------
---
---这段代码将在文档准备好之后，初始化 #my-menu 侧边栏菜单，并配置相关参数。其中：
extensions插件选项用于添加一些额外的功能，如左侧位置和半透明背景。offCanvas选项指定弹出菜单的位置为左侧。navbar选项设置导航栏的标题为 “My menu”。
此外，我们还绑定了一个点击事件来触发菜单的打开。
示例代码
以下是一个完整示例，包含 HTML、CSS 和 JavaScript 的代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------------------------------------------------- ---------------- --
-------
---- -
------------ ---------- ------ ---------- ------ -----------
------- --
-------- --
-
----------- -
-------- -----
-
---------------- -
--------- ---------
---- -----
----- -----
-
--------
-------
------
---- -------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
------- -------------------------
------- ------------------------------------------------------
------- ------------------------------------------------------------------
--------
---------------------------- -
---------------------
------------- -
----------------
---------------
--
------------ -
----------- ------
--
--------- -
-------- --- -----
-
---
------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------