如何为移动设备创建汉堡菜单？

移动设备上的汉堡菜单指的是那个三条横线按钮，用于展开和收起导航菜单。在移动端，由于屏幕空间有限，一般采用这种方式来节省空间和提高用户体验。本文将介绍如何为移动设备创建汉堡菜单。

HTML 代码

创建汉堡菜单，首先需要在 HTML 中添加对应的标签。代码如下所示：

<div class="hamburger-menu">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

这里使用一个 div 容器，内部包含三个 div 元素，分别代表三条横线。这些元素的样式将在 CSS 中定义。

CSS 样式

接下来，需要为汉堡菜单添加样式，让它看起来更加漂亮。代码如下所示：

/* 汉堡菜单容器样式 */
.hamburger-menu {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  transform: rotate(0deg);
  transition: .2s ease-in-out;
}

/* 横线样式 */
.line {
  width: 100%;
  height: 3px;
  background-color: #000;
  position: absolute;
  left: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

/* 第一条横线垂直翻转 */
.line:nth-child(1) {
  transform: rotate(45deg);
  top: 2px;
}

/* 第二条横线顺时针旋转 */
.line:nth-child(2) {
  opacity: 1;
  transform: rotate(0deg);
  top: 8px;
}

/* 第三条横线逆时针旋转 */
.line:nth-child(3) {
  transform: rotate(-45deg);
  top: 14px;
}

这里为汉堡菜单容器添加了一些基本的样式，如宽高、位置、光标类型等。横线的样式是分别旋转和翻转来实现的，给人一种菜单展开和收起的效果。

JavaScript 代码

最后，需要为汉堡菜单添加点击事件，当用户点击时展开或收起菜单。代码如下所示：

const menuBtn = document.querySelector('.hamburger-menu');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', () => {
  menu.classList.toggle('show');
});

这里需要监听点击事件，当用户点击汉堡菜单时，添加或删除相关的 show 类，用来控制菜单的展开和收起。

结语

到这里为止，你已经学会了如何为移动设备创建汉堡菜单。这种菜单在响应式设计中非常常用，能够帮助我们提高用户体验和降低开发难度。如果你有什么问题或建议，欢迎在评论区留言。