tengo un menú hamburguesa, hecho con HTML, CSS y JS, que funciona bien, le agregue una clase y (con JS) cada vez que clickeo el menú hamburguesa se despliega el menú con la animación y aparece la imagen (X) para cerrar, pero no logro hacer que cuando clickeo esa X el menú tenga la misma animación para irse, no se si debería separar el logo y el menú en un div aparte, porque ambos están en el .main_nav, intente también aplicarles una animación distinta dependiendo de que imagen se clickeaba.
Dejo el código abajo:
let menuHamburguer = document.querySelector(".nav_hamburguer"),
main = document.querySelector(".main"),
iconClose = document.querySelector(".icon_close"),
main_nav = document.querySelector(".main_nav");
menuHamburguer.addEventListener("click", () => {
main.classList.toggle("open_menu");
});
iconClose.addEventListener("click", () => {
main.classList.remove("open_menu");
});
.container {
width: 90%;
margin: 0 auto;
padding: 60px 0;
}
.main {
max-width: 1600px;
height: 100vh;
margin: 0 auto;
display: grid;
grid-template: repeat(5, max-content) / 1fr;
grid-template-areas: "main" "shop" "image1" "about" "image2";
}
.main_hero {
min-height: 400px;
position: relative;
grid-area: main;
}
.background-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.backgrounds-mobile {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
}
.backgrounds-desktop {
display: none;
}
.background-img {
width: 100%;
aspect-ratio: 3/1;
}
.main_nav {
display: flex;
align-items: center;
justify-content: space-around;
}
/* STYLE FOR MENU HAMBURGUER*/
main.open_menu {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
}
main.open_menu .main_hero .main_logo,
main.open_menu .main_hero .main_nav .nav_hamburguer {
display: none;
}
main.open_menu .main_hero .main_nav {
background-color: var(--White);
width: 100%;
animation: showMenu 1s forwards;
}
@keyframes menuClose {
from {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
}
@keyframes showMenu {
from {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
main.open_menu .main_hero .main_nav .main_links {
width: 100%;
display: flex;
}
main.open_menu .main_hero .main_nav .main_links .main_list {
padding-left: 1.4rem;
}
main.open_menu .main_hero .main_nav .main_links .main_list .main_link {
text-decoration: none;
color: var(--Black);
font-family: "League Spartan", sans-serif;
font-weight: bold;
font-size: 1.1rem;
}
main.open_menu .main_hero .container_logo_menu .icon_close {
margin-left: 30px;
}
main.open_menu .main_hero .background-container .backgrounds img {
opacity: var(--opacity);
filter: var(--brightness);
}
main.open_menu .main_bg_second {
opacity: var(--opacity);
filter: var(--brightness);
}
main.open_menu .main_controls {
filter: brightness(0.2);
cursor: none;
}
main.open_menu .container_logo_menu .icon_close {
display: block;
z-index: 2;
}
<main class="main">
<!-- SECTION MAIN -->
<section class="main_hero">
<div class="background-container">
<div class="backgrounds-mobile">
<img src="images/mobile-image-hero-1.jpg" alt="" class="background-img" />
<img src="images/mobile-image-hero-2.jpg" alt="" class="background-img" />
<img src="images/mobile-image-hero-3.jpg" alt="" class="background-img" />
</div>
<div class="backgrounds-desktop">
<img src="images/desktop-image-hero-1.jpg" alt="" class="background-img" />
<img src="images/desktop-image-hero-2.jpg" alt="" class="background-img" />
<img src="images/desktop-image-hero-3.jpg" alt="" class="background-img" />
</div>
</div>
<div class="container_logo_menu">
<svg class="nav_hamburguer" width="20" height="14" xmlns="http://www.w3.org/2000/svg">
<path
d="M20 12v2H0v-2h20zm0-6v2H0V6h20zm0-6v2H0V0h20z"
fill="hsl(0, 0%, 100%)"
fill-rule="evenodd"
/>
</svg>
<svg class="icon_close" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.364.222l1.414 1.414L9.414 8l6.364 6.364-1.414 1.414L8 9.414l-6.364 6.364-1.414-1.414L6.586 8 .222 1.636 1.636.222 8 6.586 14.364.222z"
fill="#a1a1a1"
fill-rule="evenodd"
opacity="1"
/>
</svg>
<img src="images/logo.svg" alt="" class="main_logo" />
</div>
<nav class="main_nav container">
<ul class="main_links">
<ol class="main_list">
<a href="#" class="main_link">home</a>
</ol>
<ol class="main_list">
<a href="#" class="main_link">shop</a>
</ol>
<ol class="main_list">
<a href="#" class="main_link">about</a>
</ol>
<ol class="main_list">
<a href="#" class="main_link">contact</a>
</ol>
</ul>
</nav>
</section>