Mobile Hamburger Menu 2 div 关闭/打开菜单

Question

尝试创建一个汉堡菜单，但使用两个单独的 div 类使用 javascript 打开和关闭菜单。我不确定如何实现这一点，下面是 HTML 和 CSS 相关的。 我想要实现的是使用.Menu-Icon 打开菜单和.Close 关闭菜单。 该网站可在此处访问：https://blacklist-rs.com/design/

非常感谢任何帮助，谢谢！ 请注意，这不是文件中编码的格式。片段是相关的代码。

.nav-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 340px;
  height: 100%;
  background-color: #000;
  transform: translate(-340px, 0);
  -webkit-transform: translateY(-340px, 0);
  -ms-transform: translateY(-340px, 0);
  transition: all 0.5s;
}


/* Mobile CSS */

@media only screen and (max-width: 1276px) {
  .header .menu-icon {
    left: 75px;
    top: 46px;
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(../img/menu.svg);
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .header .logo {
    position: absolute;
    left: 75px;
    transform: scale(0.5);
    margin-left: 0px;
    top: 15px;
  }
  .nav-2 {
    display: none;
  }
  .nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    visibility: hidden;
  }
}

<div class="nav-2">
  <div class="main-menu">
    <ul class="menu">
      <li><a href="#home">HOME</a></li>
      <li><a href="#services">SERVICES</a></li>
      <li><a href="#projects">OUR PROJECTS</a></li>
      <li><a href="#contact">CONTACT</a></li>
  </div>
</div>
<div class="menu-icon"></div>
<div class="logo"></div>
<div class="nav">
  <div class="nav-bg-close"></div>
  <div class="nav-container">
    <div class="close"></div>
    <div class="main-menu">
      <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

你可以在脚本标签中添加它，或者用 defer 属性链接一个 js 文件。

document.querySelector('.menu-icon').addEventListener('click', () => {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

它将一个类切换到导航，编写使您导航打开的样式作为名为 nav-open 的类。只需确保在封闭式导航的样式下方编写开放式导航的样式即可。这将确保封闭的样式被覆盖。