如何在单击时将导航菜单的汉堡包图标转换为 X？

在现代的网站与 Web 应用中，导航菜单通常都会包含汉堡包图标（也称为三明治图标），这是一个由三条水平线组成的图标，在小屏幕上使用时通常用于显示或隐藏导航栏。当用户点击汉堡包图标时，有时候需要将该图标变成一个 X 图标，以表示打开了菜单。如果你想了解如何实现这个功能，可以看下面的介绍。

使用 CSS 和 JavaScript 实现汉堡包图标转换为 X

以下是一个示例代码段，使用 CSS 和 JavaScript 实现汉堡包图标转换为 X：

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

<script>
  const menuIcon = document.querySelector('.menu-icon');
  const lines = document.querySelectorAll('.line');

  menuIcon.addEventListener('click', () => {
    menuIcon.classList.toggle('active');
    lines.forEach(line => line.classList.toggle('active'));
  });
</script>

<style>
  .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
  }

  .line {
    width: 30px;
    height: 3px;
    margin: 4px 0;
    background-color: #333;
    transition: transform 0.2s;
  }

  .active .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .active .line:nth-child(2) {
    opacity: 0;
  }

  .active .line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
</style>

代码中的 menu-icon 元素是一个 div 元素，其中包含三个用于绘制汉堡包图标的 div 元素。当用户单击 menu-icon 元素时，JavaScript 代码会在该元素上添加 active 类，用于切换样式，并在每个 line 元素上添加 active 类，以实现汉堡包图标转换为 X 的动画效果。

上述代码中使用了 CSS 3 的 transform 属性，以实现旋转和平移效果。这个属性支持旋转、缩放、移动等操作，对于实现动画相当有用。

结论

现在你应该了解如何在单击时将导航菜单的汉堡包图标转换为 X 了。上述代码只是一个示例，你可以根据自己的需要自由调整，并使用其他 JavaScript 库或框架实现相同的效果。