Material Design 是 Google 推出的一种设计理念，它能够创造出具有层次感的、具有足够可移植性的、美观的用户界面。在基于 Material Design 的 Web 应用程序中，侧边栏导航是不可或缺的一个组件，本文将介绍如何使用 Material Design 实现侧边栏导航，并提供示例代码。
准备工作
在实现侧边栏导航之前，我们需要准备以下工作：
下载 Material Design Lite 库：Material Design Lite 是 Google 提供的一套基于 Material Design 的轻量级前端框架，可以快速、简单地实现 Material Design 风格的 UI 元素。下载地址：https://getmdl.io/
引入必要的文件：将下载的 Material Design Lite 库中的 CSS 文件和 JS 文件引入到 HTML 中。
<link rel="stylesheet" href="path/to/material.min.css"> <script src="path/to/material.min.js"></script>
- 编写 HTML 页面：在 HTML 页面中添加侧边栏导航的 HTML 代码。以下是一个基本的 HTML 结构：
-- -------------------- ---- -------
----------
---- ---------------------------
----- -------------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
-----------
----- ----------------------------
---- ------------------------- ---- ---------
-------样式调整
经过以上的准备工作，我们已经可以看到一个基本的侧边栏导航了。但是，它看起来并不美观，需要我们对其进行样式调整。
调整侧边栏宽度
默认情况下，MDL 的侧边栏宽度为 256px，我们可以通过修改 CSS 样式来调整它的宽度。
.mdl-layout__drawer {
width: 200px;
}调整字体大小和颜色
默认情况下，侧边栏导航中字体大小为 16px，字体颜色为浅灰色。我们可以通过以下 CSS 样式修改字体大小和颜色。
.mdl-layout__drawer .mdl-navigation__link {
font-size: 14px;
color: #333;
}调整选中链接的颜色
在侧边栏导航中，当用户点击一个链接时，该链接会变为深灰色。我们可以通过修改 CSS 样式自定义该颜色。
.mdl-navigation__link.is-active {
color: #4CAF50;
}添加 JavaScript 功能
经过上述的样式调整，侧边栏导航的外观变得更加美观了，接下来我们将添加 JavaScript 功能，使导航更加实用。
折叠侧边栏
在手机屏幕下，侧边栏不应该一直显示在屏幕上，而应该在需要时显示出来。我们可以通过添加一个折叠按钮来实现这个功能。
<!--折叠按钮-->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
id="toggle-drawer">
<i class="material-icons">menu</i>
</button>在接下来的 JavaScript 代码中，我们将通过监听折叠按钮的点击事件来控制侧边栏的显示和隐藏。
// 折叠按钮的 DOM 节点
var toggleBtn = document.querySelector('#toggle-drawer');
// 侧边栏的 DOM 节点
var drawer = document.querySelector('.mdl-layout__drawer');
toggleBtn.addEventListener('click', function() {
drawer.classList.toggle('is-visible');
});高亮选中的链接
当用户点击某个链接时，该链接应该高亮显示。我们可以通过为选中的链接添加 is-active 类来实现这个功能。
-- -------------------- ---- -------
-- -----------
--- -------- - ---------------------------------------------------
--- ---- - - -- - - ---------------- ---- -
------------------------------------- ---------- -
-- -----------
-- --------------------------------------- -
-- ------------
--- ----------- - -------------------------------------------------------------
--- ---- - - -- - - ------------------- ---- -
---------------------------------------------
-
-- ------------
--------------------------------
-
---
-完整代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ---------------
----- ---------------- --------------------------------
-------
------------------- -
------ ------
-
------------------- --------------------- -
---------- -----
------ -----
-
------------------------------- -
------ --------
-
--------
-------
------
---- ----------------- ------------- --------------------------
----------
---- ---------------------------
----- -------------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
-----------
----- ----------------------------
-----------
------- ----------------- ------------- -------------------- -----------------
-------------------
-- -------------------------------
---------
---- ------------------------- ---- ---------
-------
------
------- ---------------------------------------
--------
--- --------- - -----------------------------------------
--- ------ - ----------------------------------------------
----------------------------------- ---------- -
--------------------------------------
---
--- -------- - ---------------------------------------------------
--- ---- - - -- - - ---------------- ---- -
------------------------------------- ---------- -
-- --------------------------------------- -
--- ----------- - -------------------------------------------------------------
--- ---- - - -- - - ------------------- ---- -
---------------------------------------------
-
--------------------------------
-
---
-
---------
-------
-------总结
本文介绍了如何使用 Material Design 实现侧边栏导航，并提供了样式调整和 JavaScript 功能的代码实现。通过了解本文提供的知识，您可以更好地理解 Material Design 的设计理念，更快速、更简单地实现 Material Design 风格的 UI 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d48a448841e9894b94ad6