前端开发中经常使用到的一个功能就是抽屉式导航菜单。而 @shortcm/drawer 是一个非常方便实用的 npm 包，能帮助我们快速实现这一功能。
什么是 @shortcm/drawer
@shortcm/drawer 是一个可以让我们轻松实现网站抽屉式导航菜单的 npm 包。它提供了丰富的配置选项，并且易于使用和定制。
如何使用 @shortcm/drawer
安装
首先，我们需要使用 npm 安装 @shortcm/drawer 包。打开终端，输入以下命令：
npm install @shortcm/drawer
调用
在 HTML 页面中引入 CSS 和 JS：
<link rel="stylesheet" href="node_modules/@shortcm/drawer/dist/css/drawer.min.css"> <script src="node_modules/@shortcm/drawer/dist/js/drawer.min.js"></script>
然后，在你的 JavaScript 代码中调用 @shortcm/drawer：
const drawer = new Drawer('.drawer', {
speed: 300,
showOverlay: true,
expandedClass: 'is-expanded',
overlayClass: 'drawer-overlay',
wrapperClass: 'drawer-wrapper',
closeButtonClass: 'js-drawer-close'
});以上代码中，'.drawer' 是菜单元素的选择器，speed 表示动画执行的速度，showOverlay 表示是否显示遮罩层，expandedClass 是菜单展开时添加的类名，overlayClass 是遮罩层的类名，wrapperClass 是菜单的外层元素的类名，closeButtonClass 是关闭按钮的类名。
示例代码
下面是一个使用 @shortcm/drawer 的基本示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
----- ---------------- ------------------------------------------------------------
-------
------
---- ---------------
----
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
-----
---- ----------------------
------- -----------------------------------
------
------
------- ------------------------------------------------------------------
--------
----- ------ - --- ----------------- -
------ ----
------------ -----
-------------- --------------
------------- -----------------
------------- -----------------
----------------- -----------------
---
---------
-------
-------结语
通过本教程，我们已经了解到了如何使用 @shortcm/drawer 包来实现网站抽屉式导航菜单。如果你需要扩展菜单的功能，只需要查看 @shortcm/drawer 的文档，掌握更多的配置选项即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d092702382238a