npm 包 @morsedigital/vanilla-responsive-navigation 的使用教程

一、认识 @morsedigital/vanilla-responsive-navigation npm 包

@morsedigital/vanilla-responsive-navigation 是一个基于 Vanilla JS 的响应式导航插件。它支持多级导航，可以自由切换样式和布局，支持无限嵌套导航和无限选项。该插件使用简单，可以适应各种前端项目。

二、安装 @morsedigital/vanilla-responsive-navigation

使用 npm 安装：

--- ------- ------------------------------------------- ------

三、使用 @morsedigital/vanilla-responsive-navigation

1. 引入依赖

在需要使用的页面中，引入依赖：

------ -------------------- ---- ----------------------------------------------
------ --------------------------------------------------------------------------------

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

阅读全文

猜你喜欢

  • npm 包 @nathanfaucett/is_integer 使用教程

    在前端开发中，我们时常需要对数字类型进行判断，其中包括整数和浮点数的判断。在 JavaScript 中，通常使用 parseInt() 和 parseFloat() 来进行这些操作。

    4 年前
  • npm包 @nathanfaucett/is_primitive 使用教程

    什么是 @nathanfaucett/is_primitive ？ @nathanfaucett/is_primitive是一个可用于检测JavaScript中是否为原始类型的npm包。

    4 年前
  • npm包@nathanfaucett/is_string使用教程

    前言 在前端开发中，字符串是不可避免的数据类型。因此，判断一个变量是否为字符串类型是一个基础且常见的需求。在JavaScript中，我们可以使用typeof运算符来判断一个变量的类型，但它并不能精确地...

    4 年前
  • npm 包 @nathanfaucett/is_text_input_element 使用教程

    什么是 @nathanfaucett/is_text_input_element？ 在前端开发中，我们时常需要判断一个 DOM 元素是否为文本输入框，例如 input 和 textarea 等。

    4 年前
  • npm 包 @nathanfaucett/is_text_node 使用教程

    在前端开发中，操作 DOM 树是必不可少的。而 DOM 树中的节点有很多类型，其中的文本节点对于前端开发来说尤为重要。可以通过 npm 包 @nathanfaucett/is_text_node 来判...

    4 年前
  • npm 包 @nathanfaucett/is_newline 使用教程

    前言 对于前端开发人员而言，npm 包是必备的工具。其中，@nathanfaucett/is_newline 是一个非常实用的 npm 包，该包可以判断字符串中是否存在换行符，并返回布尔值。

    4 年前
  • npm 包 @niksy/babayaga 使用教程

    简介 @niksy/babayaga 是一个前端开发中常用的 npm 包，可以用于快速创建复杂的数据结构，提高开发效率。它是基于 JavaScript 编写的，具有易学易用、高效实用等特点，被广泛应用...

    4 年前
  • npm 包 @nilestanner/country-list 使用教程

    前端工程师常常需要使用国家列表相关的数据，例如实现国别选择，或根据国家名称查询相关信息等。这时候，使用第三方的 npm 包可以大大方便我们的工作，其中一个很好用的包就是 @nilestanner/co...

    4 年前
  • npm 包 @nathanfaucett/is_native 使用教程

    在前端开发中，我们经常需要判断某个值是否是原生的类型或对象。这时，npm 包 @nathanfaucett/is_native 就能够派上用场了。本篇文章将为大家详细介绍如何使用这个 npm 包，并提...

    4 年前
  • npm 包 @nathanfaucett/is_length 使用教程

    在前端开发中，经常需要对字符串、数组、对象等进行长度（length）的判断。这时候，如果没有使用相关的库进行辅助处理，就需要编写冗长的代码逻辑，增加了开发难度和工作量。

    4 年前
  • npm 包 @nathanfaucett/is_nan 使用教程

    @nathanfaucett/is_nan 是一个可以用来判断一个变量是否为 NaN 的 npm 包。在前端开发中，我们经常需要判断某个变量是否为 NaN，因此它可以帮助我们更方便地实现这一功能。

    4 年前
  • npm 包 @nathanfaucett/is_node 使用教程

    介绍 @nathanfaucett/is_node 是一个 npm 包，用于判断 JavaScript 代码运行的环境是否为 Node.js，返回布尔值。 对于前端开发者来说，使用该包可以很方便地根据...

    4 年前
  • npm 包 @nathanfaucett/is_null 使用教程

    随着前端技术的快速发展，越来越多的开发者使用 npm 包来快速开发项目。npm 是全球最大的开源软件包管理系统，提供了数十万个包供开发者使用。本篇文章将介绍 @nathanfaucett/is_nu...

    4 年前
  • npm 包 @nathanfaucett/is_number 使用教程

    前言 在前端开发中，数据类型的判断是一个很常见的任务。而 @nathanfaucett/is_number 是一个能够帮助开发者进行数字类型判断的 npm 包。本文将详细介绍该 npm 包的使用方法，...

    4 年前
  • npm包 @nathanfaucett/is_numeric 使用教程

    前言 在前端开发中，我们常常需要判断一个变量或者是字符串是否为数字类型，但是如果需要反复书写判断逻辑会让代码变得臃肿冗长，也容易造成代码重复。为了避免这种情况的出现，我们可以使用一个叫做 @natha...

    4 年前
  • npm 包 @nathanfaucett/is_object 使用教程

    在前端开发中，使用不同的工具和库来帮助我们实现更高效的编码是非常常见的。在这样的工具和库中，npm 包是一种非常流行的选择。在本文中，我们将介绍一个 npm 包 @nathanfaucett/is_o...

    4 年前
  • npm 包 @nathanfaucett/last_index_of 使用教程

    介绍 在前端开发中，我们常常需要处理数组或字符串。而 lastIndexOf 方法则是字符串或数组中查找元素的一种非常常用的方式。只不过在一些特定情况下，常规 lastIndexOf 无法满足我们的需...

    4 年前
  • npm 包 @nathanfaucett/lexer 使用教程

    在前端开发领域中，使用各种优秀的 npm 包是不可避免的。其中，@nathanfaucett/lexer 包是一个非常有用的工具，它提供了一个解析器，可以将字符串转换成词法单元。

    4 年前
  • npm 包 @neozenith/eslint-config 使用教程

    本文将介绍如何使用 npm 包 @neozenith/eslint-config 来规范前端代码的开发规范。@neozenith/eslint-config 是一种基于 eslint 插件的插件，可用...

    4 年前
  • npm 包 @nathanfaucett/map_polyfill 使用教程

    简介 在前端开发中，我们经常需要使用 Map 数据结构。然而，Map 并不是所有浏览器都支持。这时候，就需要使用一些 polyfill 来实现浏览器兼容。 在这里，我们介绍一个非常优秀的 polyfi...

    4 年前

相关推荐

    暂无文章