Javascript 在手机上查看时如何将导航项目移出屏幕

我正在学习如何为移动设备构建汉堡包菜单

我建立了一个有三个孩子的导航系统。标志，导航项目和汉堡菜单。我使用flexbox将它们并排放置，并在桌面上的汉堡包菜单上显示：none以隐藏它

我试着使用相对/绝对位置，但效果不太好。此外，将弹性方向：从行更改为列也没有帮助

这是导航栏的标记

<nav class="nav">
  <div class="brand"><h4>The Brand</h4></div>

  <div class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item">
        <a href="#">Home</a>
      </li>
      <li class="navigation__item">
        <a href="#">About</a>
      </li>
      <li class="navigation__item">
        <a href="#">Services</a>
      </li>
      <li class="navigation__item">
        <a href="#">Gallery</a>
      </li>
      <li class="navigation__item">
        <a href="#">Blog</a>
      </li>
      <li class="navigation__item">
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>

  <button class="hamburger">
    <span class="hamburger__box">
      <span class="hamburger__inner"></span>
    </span>
  </button>
</nav>

品牌

我想实现的是：在移动设备上，汉堡包菜单应该出现。导航项目应远离屏幕，并垂直放置。我希望单击汉堡时，它们从右侧滑入

---

codepen:

您必须在导航div类列表中切换一个类。您的javascript代码如下所示

const handleClick = () => {
  navigation.classList.toggle("show");
};

@media (max-width: 700px) {
  .navigation.show {
    display: none;
  }
  .navigation.show {
    display: block;
  }
}

您必须为导航类添加媒体css。媒体css代码如下所示

const handleClick = () => {
  navigation.classList.toggle("show");
};

@media (max-width: 700px) {
  .navigation.show {
    display: none;
  }
  .navigation.show {
    display: block;
  }
}

之后，您必须根据您的要求设置剩余的设计。此代码只是帮助您在移动设备中隐藏菜单，并在单击“汉堡菜单”按钮时打开它

谢谢。

只需使用引导程序即可