Material Design 教程之 Navigation Drawer 详解-FunTeaLearn Online Web Tutorials

在 Material Design 设计风格中，Navigation Drawer 是一个非常常见的 UI 元素，可以让用户通过侧边栏来快速浏览和访问应用中的不同部分，比如设置、帮助、帐号等。

本文将会详细讲解 Navigation Drawer 的实现原理和常见技巧，以及如何在前端开发中运用它。

Navigation Drawer 的实现原理

Navigation Drawer 实现的核心原理是使用一个隐藏的布局来装载导航栏的内容，并将其沿着屏幕边缘滑出或者滑入。

在 Material Design 中，Navigation Drawer 通常是和 Toolbar 结合使用的，Toolbar 提供了页面主要内容的标题和操作按钮，Navigation Drawer 则提供了浏览和访问其他内容的通道。

实现 Navigation Drawer 的步骤

下面是实现 Navigation Drawer 的一般步骤：

在页面中定义 Navigation Drawer 的 HTML 结构。
使用 CSS 来定义 Navigation Drawer 的样式，比如它的背景颜色、字体、图标位置等。
使用 JavaScript 或者 jQuery 让 Navigation Drawer 实现滑入、滑出的动态效果。
将 Navigation Drawer 与页面其他的 UI 元素关联起来，比如 Toolbar、导航菜单等。

Navigation Drawer 常见技巧

1. 让 Navigation Drawer 在不同屏幕上具有不同的表现形式

考虑到用户在不同的设备、不同的屏幕尺寸下使用应用的情况，我们需要让 Navigation Drawer 在不同屏幕上具有不同的表现形式。

比如在大屏幕上，可以让 Navigation Drawer 占据整个屏幕的宽度，而在小屏幕上，可以让 Navigation Drawer 只占据屏幕的一部分，让主要内容占据更多的空间。

实现这个效果的方法是使用媒体查询（Media Query）来设置 Navigation Drawer 在不同屏幕尺寸下的样式。

@media only screen and (max-width: 600px) {
  /* Navigation Drawer 在小屏幕下的样式 */
}

@media only screen and (min-width: 601px) {
  /* Navigation Drawer 在大屏幕下的样式 */
}

2. 让 Navigation Drawer 支持触摸手势

在移动设备上，用户通常会使用触摸来滑动 Navigation Drawer 进行导航。为了支持触摸手势，我们需要使用 JavaScript 或者 jQuery 来让 Navigation Drawer 响应用户的滑动事件。

var drawer = $('#navigation-drawer');
drawer.on('swipeleft', function() {
  // 滑动到左边，关闭 Navigation Drawer
});

drawer.on('swiperight', function() {
  // 滑动到右边，打开 Navigation Drawer
});

3. 让 Navigation Drawer 支持键盘操作

在桌面设备上，用户通常会使用键盘上的 Tab、Enter 等按键来操作 Navigation Drawer。为了支持键盘操作，我们需要使用 JavaScript 或者 jQuery 来让 Navigation Drawer 响应用户的按键事件。

var menuButton = $('#menu-button');
menuButton.on('keydown', function (e) {
  if (e.keyCode == 13 || e.keyCode == 32) {
    // 用户按下 Enter 或者空格键，打开 Navigation Drawer
  }
});

Navigation Drawer 实战示例

下面是一个实战示例，展示了如何使用 Material Design Lite 库来实现一个带有 Navigation Drawer 的页面。

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

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

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

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

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

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

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

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

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

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

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

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

总结

Navigation Drawer 是 Material Design 设计风格中非常常见的一种 UI 元素，它可以让用户通过侧边栏来快速浏览和访问应用中的不同部分。

在实现 Navigation Drawer 的过程中，我们需要掌握一些常见的技巧，比如让 Navigation Drawer 支持不同屏幕尺寸、支持触摸手势、支持键盘操作等。

通过本文对 Navigation Drawer 的详细讲解，相信读者已经掌握了实现 Navigation Drawer 的基本原理和常见技巧，在实际项目中可以灵活运用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a1a2dc48841e9894ddc48c

Material Design 教程之 Navigation Drawer 详解