在 Material Design 中，NavigationDrawer 是一个非常重要的组件，它允许用户在应用程序中导航到不同的区域。为了更好地适应不同大小的屏幕，Google 在 Material Design 2.0 中引入了折叠式 NavigationDrawer，它在大屏幕上以常规抽屉样式显示，而在小屏幕上则会折叠成一个浮动操作按钮菜单。
在本文中，我们将讨论如何使用 Material Design 中的一些组件和 JavaScript 图像库来实现这种折叠式 NavigationDrawer。
效果演示
在开始之前，让我们先看一下最终实现的效果。
使用 Material Design 组件创建 NavigationDrawer
首先，我们需要使用 Material Design 组件来创建 NavigationDrawer。我们可以使用 material-components-web 库中的 drawer 组件来实现这一点。
-- -------------------- ---- -------
---- ------ ---
------ ----------------- -------------------------
---- ----------------------------
---- -----------------
-- --------------------- ---------
----- -------------------------------- --------
----
-- --------------------- ---------
----- -------------------------------- --------
----
-- --------------------- ---------
----- -------------------------------- --------
----
------
------
--------
---- ------ ------- ---
---- -------------------------------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
------- --------------------- -------------------------------- ------------------------------
----- ---------------------------------- ------------
----------
------
---------
----- --------------------------------------
---- ------- ---- ---- ---
-------
------在上面的代码中，我们创建了一个 aside 元素，并将其包含在一个 mdc-drawer 类中。 这使得我们可以使用 mdc-drawer--dismissible 类将侧栏抽屉变成可滑动的。
然后，我们在抽屉里添加了一些导航链接，这些链接将在单击时导航到不同的页面。 接下来，我们创建了一个 div 元素，将它包含在 mdc-drawer-app-content 类中，并在这个 div 元素内放置了一个 header、一个 main 和一个 footer。
实现折叠式 NavigationDrawer
现在，我们来看看如何将我们的抽屉转换为折叠式抽屉。为此，我们需要借用 Material Components Web 库中的 Top App Bar 组件。
首先，我们需要添加 Top App Bar 组件到 mdc-drawer-app-content 中。该组件应该包含一个导航图标按钮和应用程序标题。 我们可以使用 Material Icons 字体来显示导航按钮。
-- -------------------- ---- -------
---- --- --- --- ---
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
------- --------------------- -------------------------------- ------------------------------
----- ---------------------------------- ------------
----------
------
---------接下来，我们需要编写一些 JavaScript 代码来处理点击导航图标按钮的事件，并展开或折叠 NavigationDrawer。
const drawerEl = document.querySelector('.mdc-drawer');
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const navIconEl = topAppBarEl.querySelector('.mdc-top-app-bar__navigation-icon');
navIconEl.addEventListener('click', event => {
event.preventDefault();
drawerEl.classList.toggle('mdc-drawer--open');
});上述代码首先从 DOM 中获取 mdc-drawer 成分，然后获取 mdc-top-app-bar 中导航图标按钮。 然后，当用户单击导航图标按钮时，我们切换 mdc-drawer 成分的 mdc-drawer--open 类以实现折叠式 NavigationDrawer 的展开和折叠。
实现自适应 NavigationDrawer
我们还需要确保我们的 NavigationDrawer 能够自适应各种屏幕大小和方向。为此，我们可以使用 MDI（Material Design Icons）图像库，使我们的浮动操作按钮菜单看起来像一个浮动按钮，而不是缩小的抽屉。
首先，我们需要在我们的 HTML 中添加 MDI 的 CSS 样式文件：
<link href="https://cdn.materialdesignicons.com/5.2.45/css/materialdesignicons.min.css" rel="stylesheet">
然后，我们可以使用 MDI 中的材料设计类来创建一个浮动操作按钮菜单：
-- -------------------- ---- -------
---- -------- ------ ------ ---- ---
---- ------------------------
-- -------------- ----------------- ------------------------ ----------------- ---------
----- -------------------- --------------------------
----- -------------------------- -----------
----
---- --------------- ---------------- ----------------------
--- ---------------- ----------- ------------------ ----------------------------
--- --------------------- --------------- ------------------- ------
--- --------------------- --------------- ------------------- ------
--- --------------------- --------------- ------------------- ------
-----
------
------请注意，我们在浮动操作按钮菜单中使用了两个 div 元素：一个包含 mdc-fab-wrapper 类，一个包含 mdc-fab mdc-fab--extended mdc-fab--shape--extended mdc-fab--primary 类。这使得我们的浮动操作按钮菜单看起来更像一个浮动按钮。
在上述代码中，我们添加了一个 nav 元素，将其包含在 mdc-menu mdc-menu-surface mdc-menu--quick-open 类中，以便在悬停菜单中添加一些选项。
接下来，我们需要在 JavaScript 中处理点击浮动按钮事件，并打开/关闭 MDI 菜单。
// MDI FAB Button
const fabWrapperEl = document.querySelector('.mdc-fab-wrapper');
const fabEl = fabWrapperEl.querySelector('.mdc-fab');
const menuEl = fabWrapperEl.querySelector('.mdc-menu');
fabEl.addEventListener('click', () => {
menuEl.open = !menuEl.open;
});上述代码中，我们从 DOM 中获取 mdc-fab 和 mdc-menu 元素，并添加一个事件监听器来处理单击事件。在单击事件中，我们切换 mdc-menu 元素的 open 属性以打开或关闭浮动操作按钮菜单。
结论
在本文中，我们讨论了如何使用 Material Design 中的一些组件和 JavaScript 图像库来创建一个折叠式 NavigationDrawer。我们首先讨论了如何使用 Material Design 组件创建 NavigationDrawer，并在此基础上实现了折叠式 NavigationDrawer。接下来，我们使用 MDI 图像库创建了一个浮动操作按钮菜单，并在响应单击事件时打开/关闭菜单。
希望这篇文章能帮助你了解如何使用 Material Design 和 JavaScript 实现折叠式 NavigationDrawer。如果你有任何疑问或建议，欢迎在评论中与我们分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705ccc5d91dce0dc855051c