Material Design 中实现侧边菜单栏的 5 种方法！

Material Design 是一种设计语言，由 Google 在 2014 年推出，旨在为移动设备和桌面应用程序提供一致的外观和感觉。其中，侧边菜单栏是 Material Design 中常见的 UI 控件之一，本文将介绍 5 种实现侧边菜单栏的方法，其中包括使用纯 CSS、JavaScript、jQuery 和 Vue.js 等技术。

1. 纯 CSS

使用纯 CSS 实现侧边菜单栏可以减少 JavaScript 的使用，从而使页面加载速度更快。以下是实现侧边菜单栏的基本 CSS 代码：

// www.javascriptcn.com code example
/* 定义侧边菜单栏的样式 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: #f5f5f5;
  transition: transform 0.3s ease-in-out;
}

/* 定义菜单按钮的样式 */
.menu-btn {
  position: fixed;
  right: 0;
  top: 0;
  padding: 10px;
  cursor: pointer;
}

/* 定义菜单按钮的图标 */
.menu-btn i {
  font-size: 24px;
  color: #333;
}

/* 当菜单栏被打开时，将其向右移动 */
.sidebar.open {
  transform: translateX(0);
}

/* 当菜单按钮被点击时，打开菜单栏 */
.sidebar.open ~ .menu-btn i:before {
  content: "\f00d";
}

/* 当菜单按钮被点击时，关闭菜单栏 */
.sidebar.open .menu-btn i:before {
  content: "\f0c9";
}

上述代码中，.sidebar 类定义了侧边菜单栏的样式，.menu-btn 类定义了菜单按钮的样式，.open 类定义了当菜单栏被打开时的样式。当菜单按钮被点击时，使用 JavaScript 添加或删除 .open 类即可打开或关闭菜单栏。

2. JavaScript

使用 JavaScript 实现侧边菜单栏可以更加灵活，可以实现更多的交互效果。以下是使用 JavaScript 实现侧边菜单栏的基本代码：

// www.javascriptcn.com code example
<!-- HTML 代码 -->
<div class="sidebar">
  <!-- 菜单栏内容 -->
</div>
<div class="menu-btn">
  <!-- 菜单按钮 -->
</div>

<!-- JavaScript 代码 -->
<script>
  var sidebar = document.querySelector('.sidebar');
  var menuBtn = document.querySelector('.menu-btn');

  // 当菜单按钮被点击时，打开或关闭菜单栏
  menuBtn.addEventListener('click', function() {
    sidebar.classList.toggle('open');
  });
</script>

上述代码中，使用 document.querySelector() 方法获取菜单栏和菜单按钮的元素，然后使用 addEventListener() 方法监听菜单按钮的点击事件。当菜单按钮被点击时，使用 classList.toggle() 方法添加或删除 .open 类即可打开或关闭菜单栏。

3. jQuery

使用 jQuery 实现侧边菜单栏可以更加简洁，可以减少代码量。以下是使用 jQuery 实现侧边菜单栏的基本代码：

// www.javascriptcn.com code example
<!-- HTML 代码 -->
<div class="sidebar">
  <!-- 菜单栏内容 -->
</div>
<div class="menu-btn">
  <!-- 菜单按钮 -->
</div>

<!-- jQuery 代码 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var sidebar = $('.sidebar');
  var menuBtn = $('.menu-btn');

  // 当菜单按钮被点击时，打开或关闭菜单栏
  menuBtn.click(function() {
    sidebar.toggleClass('open');
  });
</script>

上述代码中，使用 $() 方法获取菜单栏和菜单按钮的元素，然后使用 click() 方法监听菜单按钮的点击事件。当菜单按钮被点击时，使用 toggleClass() 方法添加或删除 .open 类即可打开或关闭菜单栏。

4. Vue.js

使用 Vue.js 实现侧边菜单栏可以更加方便，可以使用 Vue.js 的组件化开发方式。以下是使用 Vue.js 实现侧边菜单栏的基本代码：

// www.javascriptcn.com code example
<!-- HTML 代码 -->
<div id="app">
  <sidebar></sidebar>
  <menu-btn></menu-btn>
</div>

<!-- Vue.js 代码 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('sidebar', {
    template: `
      <div class="sidebar">
        <!-- 菜单栏内容 -->
      </div>
    `
  });

  Vue.component('menu-btn', {
    template: `
      <div class="menu-btn" @click="toggleSidebar">
        <!-- 菜单按钮 -->
      </div>
    `,
    methods: {
      toggleSidebar() {
        this.$parent.$refs.sidebar.classList.toggle('open');
      }
    }
  });

  new Vue({
    el: '#app'
  });
</script>

上述代码中，使用 Vue.component() 方法定义了名为 sidebar 和 menu-btn 的组件，然后在 HTML 中使用 <sidebar> 和 <menu-btn> 标签引用这些组件。在 menu-btn 组件中，使用 @click 事件监听菜单按钮的点击事件，然后使用 $parent.$refs 属性获取父组件中的 sidebar 元素，最后使用 classList.toggle() 方法打开或关闭菜单栏。

5. React

使用 React 实现侧边菜单栏可以使用 React 的组件化开发方式。以下是使用 React 实现侧边菜单栏的基本代码：

// www.javascriptcn.com code example
// JavaScript 代码
class Sidebar extends React.Component {
  render() {
    return (
      <div className="sidebar">
        {/* 菜单栏内容 */}
      </div>
    );
  }
}

class MenuBtn extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.toggleSidebar();
  }

  render() {
    return (
      <div className="menu-btn" onClick={this.handleClick}>
        {/* 菜单按钮 */}
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sidebarOpen: false };
    this.toggleSidebar = this.toggleSidebar.bind(this);
  }

  toggleSidebar() {
    this.setState(prevState => ({
      sidebarOpen: !prevState.sidebarOpen
    }));
  }

  render() {
    return (
      <div>
        <Sidebar />
        <MenuBtn toggleSidebar={this.toggleSidebar} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

上述代码中，使用 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