📌  相关文章
📜  如何为移动设备创建汉堡菜单？(1)

📅  最后修改于: 2023-12-03 15:37:53.872000             🧑  作者: Mango

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

在移动设备中，常常使用汉堡菜单来展示导航和其他功能选项。下面介绍如何为移动设备创建汉堡菜单。

HTML 基础

将汉堡菜单的 HTML 结构放在固定位置，如在页面的顶部或侧边栏。下面是汉堡菜单的基本结构。

<div class="burger-menu">
  <div class="burger-menu__line"></div>
  <div class="burger-menu__line"></div>
  <div class="burger-menu__line"></div>
</div>

其中，"burger-menu" 类是整个汉堡菜单的容器，"burger-menu__line" 类是汉堡菜单的每一条线条。

CSS 样式

添加样式来显示汉堡菜单和导航菜单。需要注意的是，在未打开汉堡菜单时，导航菜单应该是隐藏的。

.burger-menu {
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.burger-menu__line {
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease;
}

.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
}

.menu__item {
  padding: 10px 0;
}

在打开汉堡菜单时，使用 CSS 动画来展示其打开和关闭状态。添加下面的样式来实现。

.burger-menu--open .burger-menu__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.burger-menu--open .burger-menu__line:nth-child(2) {
  opacity: 0;
}

.burger-menu--open .burger-menu__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.burger-menu--open + .menu {
  display: block;
}
JavaScript 实现

使用 JavaScript 来添加汉堡菜单的交互行为。当点击汉堡菜单时，添加相应的类名来展示或隐藏导航菜单。

const burgerMenu = document.querySelector('.burger-menu');
const menu = document.querySelector('.menu');

burgerMenu.addEventListener('click', toggleMenu);

function toggleMenu() {
  burgerMenu.classList.toggle('burger-menu--open');
  menu.classList.toggle('menu--open');
}
完整代码

下面是基本的 HTML 结构，CSS 样式和 JavaScript 代码的完整实现。

<!DOCTYPE html>
<html>
<head>
  <title>汉堡菜单示例</title>
  <style>
    .burger-menu {
      width: 30px;
      height: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
    }

    .burger-menu__line {
      width: 100%;
      height: 3px;
      background-color: #000;
      transition: transform .3s ease;
    }

    .menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 20px;
    }

    .menu__item {
      padding: 10px 0;
    }

    .burger-menu--open .burger-menu__line:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .burger-menu--open .burger-menu__line:nth-child(2) {
      opacity: 0;
    }

    .burger-menu--open .burger-menu__line:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    .burger-menu--open + .menu {
      display: block;
    }
  </style>
</head>
<body>
  <div class="burger-menu">
    <div class="burger-menu__line"></div>
    <div class="burger-menu__line"></div>
    <div class="burger-menu__line"></div>
  </div>
  <nav class="menu">
    <ul>
      <li class="menu__item"><a href="#">首页</a></li>
      <li class="menu__item"><a href="#">产品</a></li>
      <li class="menu__item"><a href="#">服务</a></li>
      <li class="menu__item"><a href="#">关于</a></li>
      <li class="menu__item"><a href="#">联系我们</a></li>
    </ul>
  </nav>
  <script>
    const burgerMenu = document.querySelector('.burger-menu');
    const menu = document.querySelector('.menu');

    burgerMenu.addEventListener('click', toggleMenu);

    function toggleMenu() {
      burgerMenu.classList.toggle('burger-menu--open');
      menu.classList.toggle('menu--open');
    }
  </script>
</body>
</html>

以上是为移动设备创建汉堡菜单的完整指南。