Material Design 是一种设计语言，由 Google 在 2014 年推出，旨在为移动设备和桌面应用程序提供一致的外观和感觉。其中，侧边菜单栏是 Material Design 中常见的 UI 控件之一，本文将介绍 5 种实现侧边菜单栏的方法，其中包括使用纯 CSS、JavaScript、jQuery 和 Vue.js 等技术。
1. 纯 CSS
使用纯 CSS 实现侧边菜单栏可以减少 JavaScript 的使用，从而使页面加载速度更快。以下是实现侧边菜单栏的基本 CSS 代码：
-- -------------------- ---- ------- -- ---------- -- -------- - --------- ------ ----- -- ---- -- ------- -- ------ ------ ----------------- -------- ----------- --------- ---- ------------ - -- --------- -- --------- - --------- ------ ------ -- ---- -- -------- ----- ------- -------- - -- --------- -- --------- - - ---------- ----- ------ ----- - -- --------------- -- ------------- - ---------- -------------- - -- --------------- -- ------------- - --------- -------- - -------- -------- - -- --------------- -- ------------- --------- -------- - -------- -------- -展开代码
上述代码中，.sidebar 类定义了侧边菜单栏的样式，.menu-btn 类定义了菜单按钮的样式，.open 类定义了当菜单栏被打开时的样式。当菜单按钮被点击时，使用 JavaScript 添加或删除 .open 类即可打开或关闭菜单栏。
2. JavaScript
使用 JavaScript 实现侧边菜单栏可以更加灵活，可以实现更多的交互效果。以下是使用 JavaScript 实现侧边菜单栏的基本代码：
-- -------------------- ---- ------- ---- ---- -- --- ---- ---------------- ---- ----- --- ------ ---- ----------------- ---- ---- --- ------ ---- ---------- -- --- -------- --- ------- - ----------------------------------- --- ------- - ------------------------------------ -- ------------------ --------------------------------- ---------- - --------------------------------- --- ---------展开代码
上述代码中，使用 document.querySelector() 方法获取菜单栏和菜单按钮的元素，然后使用 addEventListener() 方法监听菜单按钮的点击事件。当菜单按钮被点击时，使用 classList.toggle() 方法添加或删除 .open 类即可打开或关闭菜单栏。
3. jQuery
使用 jQuery 实现侧边菜单栏可以更加简洁，可以减少代码量。以下是使用 jQuery 实现侧边菜单栏的基本代码：
-- -------------------- ---- ------- ---- ---- -- --- ---- ---------------- ---- ----- --- ------ ---- ----------------- ---- ---- --- ------ ---- ------ -- --- ------- ----------------------------------------------------------- -------- --- ------- - -------------- --- ------- - --------------- -- ------------------ ------------------------ - ---------------------------- --- ---------展开代码
上述代码中，使用 $() 方法获取菜单栏和菜单按钮的元素，然后使用 click() 方法监听菜单按钮的点击事件。当菜单按钮被点击时，使用 toggleClass() 方法添加或删除 .open 类即可打开或关闭菜单栏。
4. Vue.js
使用 Vue.js 实现侧边菜单栏可以更加方便，可以使用 Vue.js 的组件化开发方式。以下是使用 Vue.js 实现侧边菜单栏的基本代码：
-- -------------------- ---- ------- ---- ---- -- --- ---- --------- ------------------- --------------------- ------ ---- ------ -- --- ------- ------------------------------------------------------------ -------- ------------------------ - --------- - ---- ---------------- ---- ----- --- ------ - --- ------------------------- - --------- - ---- ---------------- ----------------------- ---- ---- --- ------ -- -------- - --------------- - ---------------------------------------------------- - - --- --- ----- --- ------ --- ---------展开代码
上述代码中，使用 Vue.component() 方法定义了名为 sidebar 和 menu-btn 的组件，然后在 HTML 中使用 <sidebar> 和 <menu-btn> 标签引用这些组件。在 menu-btn 组件中，使用 @click 事件监听菜单按钮的点击事件，然后使用 $parent.$refs 属性获取父组件中的 sidebar 元素，最后使用 classList.toggle() 方法打开或关闭菜单栏。
5. React
使用 React 实现侧边菜单栏可以使用 React 的组件化开发方式。以下是使用 React 实现侧边菜单栏的基本代码：
-- -------------------- ---- ------- -- ---------- -- ----- ------- ------- --------------- - -------- - ------ - ---- -------------------- --- ----- --- ------ -- - - ----- ------- ------- --------------- - ------------------ - ------------- ---------------- - ---------------------------- - ------------- - --------------------------- - -------- - ------ - ---- -------------------- --------------------------- --- ---- --- ------ -- - - ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ------------ ----- -- ------------------ - ------------------------------ - --------------- - ----------------------- -- -- ------------ ---------------------- ---- - -------- - ------ - ----- -------- -- -------- ---------------------------------- -- ------ -- - - -------------------- --- --------------------------------展开代码
上述代码中，使用 class 关键字定义了名为 Sidebar、MenuBtn 和 App 的组件。在 MenuBtn 组件中，使用 onClick 事件监听菜单按钮的点击事件，然后通过 props 属性调用父组件中的 toggleSidebar() 方法打开或关闭菜单栏。在 App 组件中，使用 state 属性存储菜单栏的打开状态，然后通过 props 属性将 toggleSidebar() 方法传递给子组件。
综上所述，使用纯 CSS、JavaScript、jQuery、Vue.js 和 React 等技术都可以实现侧边菜单栏，具体选择哪种技术取决于项目的需求和开发者的偏好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d246f0a941bf7134454fb1
