随着前端技术日新月异的发展，越来越多的开源项目和 npm 包被发布到了互联网上。其中，custom-sidenav-js 是一个非常实用的 npm 包，它可以帮助我们快速地实现侧边栏导航功能。本篇文章将对这个 npm 包进行详细的介绍和使用教程，希望能够帮助读者更好地掌握这个技术。
一、什么是 custom-sidenav-js npm 包？
custom-sidenav-js 是一个基于 jQuery 和 Bootstrap 的侧边栏导航插件。它可以让我们快速地创建可伸缩、可折叠的侧边栏导航，同时支持多种形式的导航和样式风格。
二、如何使用 custom-sidenav-js npm 包？
1. 安装 npm 包
首先，我们需要在终端中运行以下命令来安装 custom-sidenav-js npm 包：
npm install custom-sidenav-js --save
2. 引入 jQuery 和 Bootstrap
在使用 custom-sidenav-js 的过程中，我们需要引入 jQuery 和 Bootstrap。可以在页面中直接引入以下代码，也可以在 webpack 中使用 ProvidePlugin 对象来注入全局变量。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------ ------------
----- ---------------- -------------------------------------------------------------------- --
-------
------
---- ------------------------
---- ------------
---- --------------- -------- ---------
---- -------- ---
------
---- ---------------- -------- ---------
---- ---- ---
------
------
------
------- ------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
-------
-------3. 初始化 custom-sidenav-js
在正式使用 custom-sidenav-js 前，我们需要先初始化它。可以在 sidebar 栏目中，使用以下代码对 custom-sidenav-js 进行初始化：
$('.sidebar').sidenav({
accordion: true,
autoScroll: true,
slideSpeed: 250,
toggleIcon: true,
})在上述代码中，我们配置了一些参数，可以根据自己的具体需求进行调整。参数的含义如下：
accordion：是否使用手风琴效果，默认为false。autoScroll：是否启用自动滚动，默认为false。slideSpeed：侧边栏执行展开和收起的速度（单位：毫秒），默认为250ms。toggleIcon：是否显示切换图标，默认为true。
4. 定义侧边栏导航
最后，我们需要在 sidebar 栏目中定义侧边栏导航。使用以下代码可以添加一个导航链接：
-- -------------------- ---- -------
--- ---------- -------------
--- -----------------
-- --------------- ------- -------------------
-----
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- --------------- --------- ---------------------
-----
-----三、一个完整的示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------ ------------
----- ---------------- -------------------------------------------------------------------- --
----- ---------------- ------------------------------- --
-------
------
---- ------------------------
---- ------------
---- --------------- -------- ---------
--- ---------- -------------
--- -----------------
-- --------------- ------- -------------------
-----
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- --------------- --------- ---------------------
-----
-----
------
---- ---------------- -------- ---------
---------- -----------
------
------
------
------- ------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- --------------------------------------
--------
---------- -- -
-----------------------
---------- -----
----------- -----
----------- ----
----------- -----
--
--
---------
-------
-------四、参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672613660cf7123b3646f