如果你正在开发一个前端项目，并需要一个漂亮且易于使用的菜单组件，那么 burger 可以是你的选择之一。这个 npm 包提供了一种简单的方式来创建响应式的移动端菜单。
安装
安装 burger 很容易，只需在终端中运行以下命令：
npm install burger
快速上手
一旦安装了 burger，就可以在 JavaScript 文件中引入它并创建一个新的菜单实例：
import Burger from 'burger';
const burger = new Burger({
element: '#burger-menu',
position: 'right'
});这将在名为 #burger-menu 的 HTML 元素上创建一个新的 burger 菜单，并将其放置在屏幕的右侧。
配置选项
Burger 提供了许多配置选项，以便您能够自定义菜单的外观和行为。下面是一些常用的选项：
element: 菜单所附加的 HTML 元素的 ID 或选择器（默认为'nav'）position: 菜单相对于屏幕的位置（默认为'left'）width: 菜单的宽度（默认为'280px'）bodyClass: 在打开菜单时添加到页面 body 上的 CSS class（默认为'burger-open'）menuOpenClass: 当菜单处于打开状态时添加到菜单上的 CSS class（默认为'burger-menu-open'）
示例
下面是一个完整的示例，演示如何使用 burger 来创建一个简单的响应式菜单：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
-- ------- --
------------ -
-------- -----
-
-- ------- --
------------ ------------ -
-------- ------
-
-- ---- --
------------ -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- -----
------ -----
-------- -----
----------- -----------
---------- ------------------
----------- --------- ---- ------------
-
----------------- -
---------- --------------
-
-- ---- --
------------ - -
-------- ------
---------- -----
-------------- -----
------ -----
---------------- -----
-
--------
-------
------
---- ----- ---
---- ---------------- ------------------ ------
-- -----------------
-- -------------- ------
-- --------------------
------
---- ----- ---
----
------ ----------------------
------ -------------- -----------
------ -------------------------
-----
---- -- --------- ---
------- ------------------------------------------------------
---- -- ------ -- ---
--------
----- ------ - --- --------
-------- ---------------
--------- --------
------ ------
---------- -------------
---
---------
-------
-------这个示例创建了一个简单的移动端菜单，当屏幕宽度小于 768 像素时，它会替换掉桌面端的链接列表。菜单使用 CSS 进行自定义样式，并附加到 #burger-menu 元素上。
结论
在本文中，我们介绍
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35690