使用 JS 制作简单的汉堡菜单 - 初学者

汉堡菜单是无数网站中常见的经典 UI 功能。它用于在点击时显示或隐藏菜单，尤其适用于移动端设计。

在本教程中，我们将学习使用 HTML、CSS 和 Javascript 创建汉堡菜单。

这是 HTML：



<head>
  <!-- Material Icon CDN -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <ul class="menu">
    <li><a class="menuItem" href="#">Home</a></li>
    <li><a class="menuItem" href="#">Profile</a></li>
    <li><a class="menuItem" href="#">About</a></li>
    <li><a class="menuItem" href="#">Contacts</a></li>
  </ul>
  <button class="hamburger">
    <!-- material icons https://material.io/resources/icons/ -->
    <i class="menuIcon material-icons">menu</i>
    <i class="closeIcon material-icons">close</i>
  </button>
</body>

首先添加一个带有类的基本菜单menu和带有类的菜单链接menuItem。

然后添加一个带有类的按钮hamburger，并在其内部添加菜单和关闭图标。稍后我们将使用 CSS 默认隐藏关闭图标，并使用 JavaScript 切换显示哪个图标。

您可以使用任何您想要的图标系列。我使用了Material Icons，将其 CDN 加载到头部，并在按钮内添加了菜单和关闭图标。

和menuIcon类closeIcon用于稍后在 CSS 和 Javascript 中引用图标。

现在让我们添加一些 CSS。

添加到按钮，position: fixed;这样滚动就不会影响它。并z-index:100;确保它位于所有其他元素的上方。

添加top和，right其值为，1rem将其放置在屏幕的右上角。



.hamburger {
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  padding: 4px;
  border: black solid 1px;
  background: white;
  cursor: pointer;
}

要默认隐藏关闭display: none;图标，请添加到closeIcon类中。


 css
.closeIcon {
  display: none;
}

在菜单类中，添加position: fixed;使其不能被滚动掉。

将top、right和设置bottom为left0，使菜单覆盖整个屏幕。



.menu {
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: black;
  color: white;
  list-style: none;
  padding-top: 4rem;
}

transform: translateY(-100%);用于默认隐藏屏幕上方的菜单。
transition: transform 0.2s;是可选的。它用于为平移值的变化添加动画效果，以创建上下滑动的效果。

通过将translateY重置为0，菜单将向下滑动并覆盖整个屏幕。

将其添加到showMenu类中：



.showMenu {
  transform: translateY(0);
}

此类将使用 Javascript 在菜单中添加和删除，以显示和隐藏菜单。

这是切换菜单的 Javascript：


 javascript
const menu = document.querySelector(".menu");
const menuItems = document.querySelectorAll(".menuItem");
const hamburger= document.querySelector(".hamburger");
const closeIcon= document.querySelector(".closeIcon");
const menuIcon = document.querySelector(".menuIcon");

function toggleMenu() {
  if (menu.classList.contains("showMenu")) {
    menu.classList.remove("showMenu");
    closeIcon.style.display = "none";
    menuIcon.style.display = "block";
  } else {
    menu.classList.add("showMenu");
    closeIcon.style.display = "block";
    menuIcon.style.display = "none";
  }
}

hamburger.addEventListener("click", toggleMenu);

点击汉堡按钮将会调用toggleMenu()。

它检查菜单是否包含该类showMenu。

如果菜单包含该类showMenu，我们会将其移除以隐藏菜单。我们还会切换以display隐藏关闭图标并显示菜单图标。

如果菜单没有该类showMenu，我们会添加它，显示关闭图标并隐藏菜单图标。

最难的部分已经过去了！剩下的就是在用户点击链接时隐藏菜单。

在上面的 Javascript 中，我们使用获取了所有菜单项querySelectorAll。


 javascript
const menuItems = document.querySelectorAll(".menuItem");

通过forEach，我们可以遍历每个链接并添加对的调用toggleMenu()。

toggleMenu()反过来会隐藏菜单（因为如果用户可以点击菜单项，就意味着菜单正在显示）。



 javascript

menuItems.forEach( 

  function(menuItem) { 

    menuItem.addEventListener("click", toggleMenu);

  }

)

就是这样！

感谢阅读😄！！

（第二次重写 01/10/21）
希望您发现它有用并且编码愉快👨‍💻！

文章来源：https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0