本文将介绍如何使用 npm 包 TinyNav.js 来为你的网站添加响应式导航栏，并提供详细的实现步骤和示例代码。
什么是 TinyNav.js？
TinyNav.js 是一个轻量级的 JavaScript 库，它可以帮助你在移动设备上创建漂亮的响应式导航菜单。它可以自动检测并转换导航菜单为下拉菜单，并且支持多层嵌套菜单。
安装 TinyNav.js
你可以通过 npm 安装 TinyNav.js：
npm install tinynav
安装完成后，在你的 HTML 文件中引入 TinyNav.js：
<script src="node_modules/tinynav/dist/tinynav.min.js"></script>
使用 TinyNav.js
为了让 TinyNav.js 能够正常工作，你需要满足以下条件：
- 导航菜单必须是一个有序列表（
<ol>）或无序列表（<ul>）； - 导航菜单必须有一个 ID，以便 TinyNav.js 可以将其识别。
接下来，我们需要初始化 TinyNav.js。在页面加载完成后，添加以下代码：
const nav = document.querySelector('#nav'); // 将 #nav 替换为你的导航菜单 ID
tinyNav(nav);现在，当你在移动设备上查看你的网站时，你应该能够看到 TinyNav.js 自动为你的导航菜单创建下拉菜单了。
高级用法
设置选项
你可以通过传递一个选项对象来自定义 TinyNav.js 的行为。以下是可用选项：
header: 下拉菜单头部的文本，默认为 "选择一个菜单"；indent: 子菜单缩进的像素值，默认为 10；label: 列表项中链接的标签类型，默认为 "span"；nested: 是否支持多层嵌套菜单，默认为true；prependTo: 下拉菜单添加到的元素，默认为null（添加到 body 中）。
以下是如何使用选项对象：
const nav = document.querySelector('#nav'); // 将 #nav 替换为你的导航菜单 ID
tinyNav(nav, {
header: 'Menu', // 修改下拉菜单头部文本
indent: 20, // 增加子菜单缩进值
nested: false, // 禁止多层嵌套菜单
});事件
TinyNav.js 提供了两个事件：
open.tinynav: 当下拉菜单打开时触发；close.tinynav: 当下拉菜单关闭时触发。
以下是如何使用事件：
-- -------------------- ---- ------- ----- --- - ------------------------------- -- - ---- --------- -- ------------- ------------------------------------ -- -- - ----------------------- --- ------------------------------------- -- -- - ----------------------- ---
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ------------
------- --------------------------------------------------------
-------
------
-----
--- ---------
------ ----------------------
------ -------------- ------
----
------ ------------ ----------------
------ ------------ -------------
-----
-----
------ ---------------------
----
-----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------