0

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>

3
  • Por favor, comparta el código JavaScript. Commented el 24 oct. a las 16:32
  • El JS esta al final @cardosource
    – Excorpion
    Commented el 24 oct. a las 16:35
  • Con el código provisto, no logro entender la animación que buscas realizar. Actualmente el código funciona, la hamburguesa abre y cierra, y la X cierra solamente. Hay manera de que realices un ejemplo mínimo verificable de prueba ?? Algo visual que corra acá por ejemplo: jsfiddle.net
    – Excorpion
    Commented el 24 oct. a las 16:46

1 respuesta 1

1

Voy a explicar en modo genérico, porque creo es más útil para otros lectores:

Existen al menos 2 formas de animar:

  • Con transiciones: Es más simple y menos versátil. Con solo agregar/quitar una clase puedes animar la entrada/salida de un elemento
  • Con animaciones: Es algo "más complejo", y para animar una entrada/salida necesitas 2 clases, en tu caso una "open" y otra "close"

Vamos con esta última forma: Aquí puedes generar 2 keyframes de animacion: La primera con los valores de "open" y la segunda sería lo inverso para el "close"

Existe otra alternativa, que es reversar la primera animación. Para esto es necesario utilizar un truco: Debemos hacer que el navegador vuelva reestablecer la animación para esto quitamos las clases (open y close) solicitamos algo como el offsetWidth, lo cual obliga al navegador a obtener un valor del ancho, por lo que ejecuta el cambio render visual volviendo el play-state al valor inicial (ya que no tiene las clases).

Por último, mencionar, que antes había un problema al mostrar/esconder elementos que inician como ocultos (el típico modal). Ya que se utiliza display:none, entonces para ocultar había que utilizar código javascript que esperara que la animación finalizara y volver el elemento nuevamente a display:none. Hoy las animaciones permiten modificar la propiedad display asi que o hay problema. Para demostrarlo, en el ejemplo, agrego un cuadrado azul, y se ve claramente que cuando la animación del cuadrado rojo termina, el azul ocupa su lugar.

function mostrar(){
 resetAnimation(algo)
  algo.classList.add("open");
}

function esconder(){
  resetAnimation(algo)
  algo.classList.add("close");
}

function resetAnimation(el){
   el.classList.remove('open','close');
   return el.offsetWidth;
}
#algo{
   width:100px;
   height:100px;
   background-color:red;
   display:none;
}

#algo.open{
  display:block;
  animation: 2s ease-in 0s 1 normal forwards running ejemploAnimacion;
}

#algo.close{
  display:block;
  animation: 2s  ease-in 0s 1 reverse forwards running ejemploAnimacion;
}

@keyframes ejemploAnimacion {
  from {
    opacity: 0;
    display:none;
  }
  to {
    opacity: 1;
  }
}

#otro{
   width:100px;
   height:100px;
   background-color:blue;
}
<button onclick="mostrar()">mostrar</button>
<button onclick="esconder()">esconder</button>

<div id="algo"></div>
<div id="otro"></div>


Resumen:

  • Se necesitan 2 clases:
    • Open: Con la animación en normal
    • Close: Con la animación en reverse
  • Una función que resetee la animación

Como recomendación final, averigua sobre el elemento <dialog> yo lo he utilizado para menús con bastantes buenos resultados

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.