简介
Linklet 是一个开源的 npm 包，用于制作现代化的动态导航菜单。它可以让前端开发人员快速构建响应式的菜单系统，以支持多个设备和屏幕尺寸。
安装
你可以通过以下命令安装 Linklet：
npm install linklet
基本用法
Linklet 能够生成能够轻松实现在多种设备和尺寸上适配的菜单，下面是基本的使用方法。
HTML 结构
Linklet 的 HTML 结构如下所示：
-- -------------------- ---- -------
---- -------------
----
------ ----------------------
------ -------------- ------
----
------ ------------ -- ------------
------ ------------- -- -----------
-----
-----
------ ---------------------
----
------ ------------ -----------------
------ ---------------- -----------------
------ ---------------- ----------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
------menu类用于包裹整个导航菜单。ul用于包裹菜单项li用于包裹菜单项内容。- 需要子菜单的
li应该包含一个额外的ul，然后子菜单项也应该按照同样的模式从次级ul中组装出来。
添加 Linklet
在 HTML 中添加 Linklet 并设置一些选项：
-- -------------------- ---- -------
------- ---------------------- --------------------------
--------
--- ---- - --------------------------------
--- ------- - -
----------------- ---
-
--- ------- - --- ------------- ---------
-- -----
---------------
---------mobileBreakPoint表示菜单切换到移动设备模式的窗口宽度阈值。
高级用法
Linklet 还提供了一些高级选项，以帮助你更好的构建导航菜单。
响应式菜单模板
你可以创建具有不同模板的响应式菜单，以用于不同设备的屏幕尺寸。
-- -------------------- ---- -------
---- -------------
------- ---------------- --------------------- ---------------
----
------ ----------------------
------ -------------- ------
----
------ ------------ -- ------------
------ ------------- -- -----------
-----
-----
------ ---------------------
----
------ ------------ -----------------
------ ---------------- -----------------
------ ---------------- ----------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
---------
------- ---------------- --------------------- --------------
----
------ ----------------------
-----
---- ---------------------
----
------ ----------------------
------ -------------- -----------
------ --------------------------
------ ---------------- -----------
-----
------
---------
------接下来你需要设置如下 Linklet 选项：
var options = {
templates: {
desktop: '.menu-template[name="desktop"].type',
mobile: '.menu-template[name="mobile"].type'
},
mobileBreakPoint: 600
};包含子菜单的导航菜单
你可以使用 Linklet 创建包含子菜单的导航菜单。
-- -------------------- ---- -------
---- -------------
----
------ ----------------------
------ -------------- ------
----
------ ------------ -- ------------
------ ------------- -- -----------
-----
-----
------ ---------------------
----
------ ------------ -----------------
------ ---------------- -----------------
------ ---------------- ----------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
------然后设置 Linklet 选项：
-- -------------------- ---- -------
--- ------- - -
---------- -
-------- ---------------------------------
------- -------------------------------
--
----------------- ----
-------- -
---------- ----
---------- ---
-
--可触摸的滑动菜单
你可以使用 Linklet 创建可触摸的滑动菜单。
-- -------------------- ---- -------
---- -------------
----
------ ----------------------
------ -------------- ------
----
------ ------------ -- ------------
------ ------------- -- -----------
-----
-----
------ ---------------------
----
------ ------------ -----------------
------ ---------------- -----------------
------ ---------------- ----------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
------然后设置 Linklet 选项：
-- -------------------- ---- -------
--- ------- - -
---------- -
-------- ---------------------------------
------- -------------------------------
--
----------------- ----
------ -
------ -----
----------- ---
-
--结语
Linklet 是一个非常方便的 npm 包，可以帮助你快速构建响应式的导航菜单。当你为你的下一个项目寻找菜单解决方案时，不妨试试 Linklet。
示例代码
你可以在这里找到示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
- -
------- --
-------- --
----------- -----------
-
---------- -
------- ---- -----
------ ----
-
----- -
----------------- --------
------ -----
---------- -----
------------ ----
--------------- ----------
--------- -------
-
----- - -
------- - -----
------ -----
---------------- -----
-
----- ------- -
------ --------
-
-- -
---------------- -----
-------- -----
-
-- -
--------- ---------
------- - -----
-
-- -- -
--------- ---------
-------- -----
---- -----
----- --
----------------- -----
----------- -------
-------- --
----------- --- ---- ------------
----------- - --- ---- ------- -- -- -----
-
-------- - -- -
----------- --------
-------- --
-
-- -- -- -
-------- ------
-
-------- - -
------------ -------
-
------------- -
-------- -----
----------------- --------
-
------------- -- -
-------- ------
------- --
-------- --
-
------------- -- -
-------- ------
-------- -----
-------------- --- ----- --------
-
------------- ------------- -
-------------- -----
-
------------- - -
------- --
------ -----
---------------- -----
---------- -----
------------ ----
--------------- ----------
-
------------ -
--------- ---------
---- -----
------ -----
-------- -----
-------- ------
-
------------ - -
-------- ------
------ -----
------- -----
---------- ------
------------ -----
----------- -------
------ -----
------- --- ----- -----
-------------- ----
----------- --- ---- ------------
-
------------ ------- -
----------------- --------
------ -----
-
-------------------- -
-------- ------
-
-- ----- ------- --
------ ----------- ------ -
----- -
--------- ---------
-
------------ -
-------- ------
-
------------- -
-------- -----
--------- ---------
------ -----
---- -----
----- --
-------- -----
-
--------------------- -
-------- ------
-
-- -- -
--------- -------
-------- -----
------ -----
-
-------- ------- -
------------ ------------
-------- --------
------------- ----
-
-------------- - -- -
-------- ------
-
------------- -------------- - -- -
-------- ------
-
-
------ ----------- ------ -
------------- -
-------- -----
-
-------- ------- -
------------ ------------
-------- --------
------------- ----
-
-
--------
-------
------
---- ------------------
---- ------- -------- ---
---- -------------
----
------ ----------------------
------ -------------- ------
----
------ ------------ -- ------------
------ ------------- -- -----------
-----
-----
------ ---------------------
----
------ ------------ -----------------
------ ---------------- -----------------
------ ---------------- ----------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
------
---- ------ -------- ---
---- -------------
----
------ ----------------------
-----
---- ---------------------
----
------ ----------------------
------ -------------- -----------
--- ------------------ ----------------- ------------
----
------ ------------ -----------------
------ ---------------- -----------------
--- ------------------ ---------------- ------ ------------
----
------ --------------- --- --- ------------------
------ --------------- --- --------- ------------------
-----
-----
-----
-----
------ ---------------- -----------
-----
------
------
------
------- -----------------------------------------
--------
--- ------- - -
---------- -
-------- --------------
------- -------------
--
----------------- ----
-------- -
---------- ----
---------- ---
--
------ -
------ -----
----------- ---
-
--
--- ------- - --- ---------------- ---------
---------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567ed81e8991b448e4152