移动汉堡菜单 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

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

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

它将把一个类切换到导航，将使导航打开的样式编写为类nav-open。只要确保将打开导航的样式写在关闭导航的样式下面。这将确保封闭样式被覆盖。