前言
在网站开发中，侧边栏导航已经成为了普及化的设计元素。一个好的侧边栏能够让你的网站更加直观易用，让访问者更容易找到自己所需的信息。
前端技术向来是以快速出品和实现为导向的领域，这里，我们介绍一款非常易用的npm包来实现侧边栏导航——side-nav。
介绍
side-nav 是一款轻量级的 jQuery 插件，它可以让你快速实现一个响应式的侧边栏导航。此插件支持垂直和水平的导航菜单，同时它还具有以下特点:
- 响应式设计，适用于所有设备
- 动态生成并排列下拉菜单的选项
- 简单易用，使用者不需要深入的前端技术知识
除了这些特点以外，side-nav 还支持使用 css 自定义样式，因此你可以把它美化得和网站的整体设计相匹配。
准备工作
在使用之前，我们需要先安装 side-nav 这个npm包。你可以通过以下指令来在你的项目中安装它。
npm install side-nav
安装完成后，我们需要在 HTML中导入依赖包，以便在我们的代码中调用。这个过程非常简单，只需要在HTML5中加入以下代码即可。
<link rel="stylesheet" href="./node_modules/side-nav/dist/side-nav.css"> <script src="./node_modules/side-nav/dist/side-nav.js"></script>
此处须注意，我们写的代码中引用的 "./node_modules/" 前缀需要保证和你项目的目录结构相符。
使用方法
使用 side-nav 时，你需要在你的 HTML 页面上添加一个导航菜单元素，以及为它添加一些子菜单，这些子菜单将在用户触发时呈现出来。这一过程十分类似你平常所写的 HTML 结构。
HTML 结构
这里我们演示一个垂直形式的导航菜单示例。先看一下 HTML 的结构代码。
-- -------------------- ---- -------
---- -----------------
----
----
-- ---------------
-----
----
-- ---------------
----
------ ----------------------
------ ----------------------
------ ----------------------
-----
-----
----
-- -----------------
-----
-----
------这段代码定义了一个名为 side-nav 的导航菜单，并且插入了三个主菜单，每个菜单下都有相应的子菜单。
实例化插件
添加好 HTML 结构后，我们还需要进行实例化。实例化 side-nav 非常简单，只需要在您的 JavaScript 文件中添加以下代码：
$(function() {
$('.side-nav').sideNav();
});自定义样式
有时，default 样式并不总是满足你的需求，我们可以通过自定义 CSS 来美化插件。在这里，我们提供几种例子来演示如何修改菜单项的默认样式。
这里的 CSS 代码将显示菜单条目时的动画效果修改成了惯性滑行的方式：
-- -------------------- ---- -------
--------- -- -- -
----------- -------
-------- --
--------- ---------
------ -----
----------- --- ----- ------------
-------- -----
----------- - --- ---- - ------- -- -- ------
-
--------- -- -- -- -
------- --
-
--------- -- -- -- - -
-------- ---- -----
-------- ------
------- -----
----------- -----
------------ -----
-------------- --- ----- --------
----------------- ------
-------- -----
---------- -----
------------ ----
----------- --- ----- ------------
-
--------- -- -- -------------- - -
----------- --- ----- --------
-
--------- -- -- ------------- - -
-------------- -----
-
--------- --------- -- -
----------- --------
-------- --
-
--------- -- -- --------- -
----------------- --------
-此外，你还可以通过以下的代码来自定义菜单样式：
-- -------------------- ---- -------
--------- -
----------------- ------
------- --
-------- --
-
--------- -- -
----------- -----
-------------- --
------------- --
-
--------- -- -- -
------- --
-
--------- -- -- - -
-------- -----
---------- -----
------------ ----
------ -----
---------------- -----
-------- ------
-
--------- -- -- ------- -
------ --------
----------------- --------
-综述
通过使用 side-nav 这个轻量级的侧边栏导航 npm 包，我们可以轻松快捷地实现一个漂亮且功能强大的网站导航。此插件提供了一些简单易用的 API，让我们在制作侧边栏导航时更加得心应手。虽然本文仅介绍了一些插件的基本用法和自定义样式，但是对于大部分需要实现导航栏的网站而言，这已经足够好用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606e81e8991b448de94e