一、认识 @morsedigital/vanilla-responsive-navigation npm 包
@morsedigital/vanilla-responsive-navigation 是一个基于 Vanilla JS 的响应式导航插件。它支持多级导航，可以自由切换样式和布局，支持无限嵌套导航和无限选项。该插件使用简单，可以适应各种前端项目。
二、安装 @morsedigital/vanilla-responsive-navigation
使用 npm 安装：
npm install @morsedigital/vanilla-responsive-navigation --save
三、使用 @morsedigital/vanilla-responsive-navigation
1. 引入依赖
在需要使用的页面中，引入依赖：
import ResponsiveNavigation from '@morsedigital/vanilla-responsive-navigation'; import '@morsedigital/vanilla-responsive-navigation/dist/ResponsiveNavigation.min.css';
2. 创建 HTML 结构
创建一个具有如下结构的 HTML：
-- -------------------- ---- -------
---- --------------------
----
------ ------------- ---- ----------
------ ------------- ---- ----------
--- ---------------------
-- ------------- ---- -----
--- -----------------
------ ----------------- ---- ----------
------ ----------------- ---- ----------
--- ---------------------
-- ----------------- ---- -----
--- -----------------
------ --------------------- ---- ----------
------ --------------------- ---- ----------
-----
-----
-----
-----
--- ---------------------
-- ------------- ---- -----
--- -----------------
------ ----------------- ---- ----------
------ ----------------- ---- ----------
-----
-----
-----
------3. 初始化插件
在你的 JavaScript 文件中添加如下代码：
-- -------------------- ---- ------- ----- -------------------- - --- ------------------------------------ - ----------- ---- -------------- ----- ----------------- ----- --------------------- --- ---------- --------------- ---------------------- -------- ------------------- ----- ------------------- ------ ------------- ---- ---------- ------------ -------------- ------------ --------------- -------------------- ---------------------- ----------------- ------------- ----------- ------------------ ------------------ ----------------- ---------------- -------------------- ------------------ ---
以上代码初始化了一个名为 responsiveNavigation 的插件实例，并将其应用于 primary-nav 元素。实例化的选项都是由键/值对组成的对象，你可以根据你的需要进行自定义调整。
4. 高级选项
此插件还提供了更多高级选项，以实现更个性化定制插件外观和交互。
breakpoint
- 描述：布局切换的断点（以像素为单位）。
- 类型：数字。
- 默认值：767。
menuToggleBtn
- 描述：如果为 true，则将返回一个切换按钮，用户单击可显示抽屉式菜单。如果为 false，则不会生成切换按钮。
- 类型：布尔。
- 默认值：true。
subMenuToggleBtn
- 描述：如果为 true，则每个可以展开子菜单列表的父菜单项（即具有子菜单列表的菜单项）将返回包含切换图标的按钮，用于切换子菜单的可见性。如果为 false，将不会生成子菜单切换按钮。
- 类型：布尔。
- 默认值：true。
subMenuToggleBtnHtml
- 描述：设置子菜单展开/关闭按钮的 HTML 内容，默认值为 + 。它通常被使用 Font Awesome 图标替代。
- 类型：字符串。
- 默认值：'+'。
subMenuTogglePosition
- 描述：设置按钮的位置（在子菜单项的哪一侧），可以是 "left" 或 "right"。
- 类型：字符串。
- 默认值：'right'。
subMenuOpenOnHover
- 描述：如果为 true，则用鼠标悬停代替点击来打开子菜单。
- 类型：布尔。
- 默认值：false。
subMenuOpenOnClick
- 描述：如果为 true，则用鼠标点击代替悬停来打开子菜单（仅在 subMenuOpenOnHover 为 false 时生效）。
- 类型：布尔。
- 默认值：false。
subMenuDelay
- 描述：鼠标悬停或点击时，以毫秒为单位的等待时间，可以控制子菜单何时打开。
- 类型：数字。
- 默认值：500。
openClass
- 描述：添加到具有菜单打开状态（例如，菜单展开或通过单击或悬停打开的子菜单）的元素的 CSS 类。
- 类型：字符串。
- 默认值：'menu-open'。
isHiddenClass
- 描述：添加到隐藏元素（例如，隐藏的子菜单列表）的 CSS 类。
- 类型：字符串。
- 默认值：'is-hidden'。
toggleBtnClass
- 描述：添加到主菜单切换按钮的 CSS 类。
- 类型：字符串。
- 默认值：'navigation-toggle'。
subMenuToggleBtnClass
- 描述：添加到每个子菜单切换按钮的 CSS 类。
- 类型：字符串。
- 默认值：'submenu-toggle'。
subMenuClass
- 描述：作为子菜单列表的 CSS 类。
- 类型：字符串。
- 默认值：'sub-menu'。
subMenuLevelClass
- 描述：将不同级别的子菜单列表分组的 CSS 类的前缀。
- 类型：字符串。
- 默认值：'sub-menu-level-'。
subMenuOpenClass
- 描述：作为展开的子菜单列表的 CSS 类。
- 类型：字符串。
- 默认值：'sub-menu-open'。
subMenuOpeningClass
- 描述：将正在打开的子菜单列表作为 CSS 类。
- 类型：字符串。
- 默认值：'sub-menu-opening'。
5. 示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------- ---------------------------------------------------
----- --------------- ---------------------------- ---------------- --
-----
----------------
---------------------------------------------------------------------------------
--
---- ------- --- -- ---
-----
---------------------------------------------------------------------------------------------------
----------------
--
-------
-- --- --- -- --
--- -
------- -----
-
--------- -
------------ -----
-
--------
-------
------
---- --------------------
----
------ ------------- ---- ----------
------ ------------- ---- ----------
--- ---------------------
-- ------------- ---- -----
--- -----------------
------ ----------------- ---- ----------
------ ----------------- ---- ----------
--- ---------------------
-- ----------------- ---- -----
--- -----------------
------ --------------------- ---- ----------
------ --------------------- ---- ----------
-----
-----
-----
-----
--- ---------------------
-- ------------- ---- -----
--- -----------------
------ ----------------- ---- ----------
------ ----------------- ---- ----------
-----
-----
-----
------
------- -----------------------------------------------------------------------------------------------------------
--------
-- -----
----- -------------------- - --- ------------------------------------ -
----------- ----
-------------- -----
----------------- -----
--------------------- --- ---------- ---------------
------------------- -----
------------------- ------
------------- ----
---------- ------------
-------------- ------------
--------------- --------------------
---------------------- -----------------
------------- -----------
------------------ ------------------
----------------- ----------------
-------------------- ------------------
---
---------
-------
-------四、总结
本文介绍了如何使用 @morsedigital/vanilla-responsive-navigation，该插件可以帮助你创建一个响应式导航菜单，以适应各种前端项目。本文提供了详细而深入的使用教程，包括初始化选项和示例代码。希望这篇文章对于初学者有所帮助，也欢迎各位利用本文中提供的功能和选项，自己定制一个炫酷的响应式菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244769