0
210
VistasIcono de hamburguesa css animación en una x
Estoy tratando de hacer que el ícono de una hamburguesa se convierta en una x al hacer clic y luego revertir al hacer clic nuevamente. Tengo la animación configurada, creo, pero necesito que se active al hacer clic en lugar de estar configurada constantemente.
.nav-toggle { position: absolute; top: 2.3rem; right: 1rem; display: none; flex-direction: column; justify-content: space-between; height: 22px; width: 22px; } .nav-toggle:hover { / cursor: pointer; } .nav-toggle .bar { height: 3px; width: 100%; background-color: white; border-radius: 10px; } .nav-toggle .bar:nth-child(2) { transform: translateX(-50px); background: transparent; box-shadow: none; } .nav-toggle .bar:nth-child(1) { transform: rotate(45deg) translatey(13px) } .nav-toggle .bar:nth-child(3) { transform: rotate(-45deg) translateY(-13px) } .nav-toggle:active { transition: 1s; }La función ToggleNavLinks solo se usa para establecer una visualización de elementos en ninguno que no esté relacionado con el ícono de la hamburguesa.
<a class="nav-toggle" onclick="ToggleNavLinks()" > <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>Referencia de la imagen de apertura del menú:
guión.js
function ToggleNavLinks() { var navLink = document.getElementsByClassName("nav-links")[0]; var navBar = document.getElementsByClassName("navbar")[0]; if (window.getComputedStyle(navLink).display === "none") { navLink.style.display = "flex"; navBar.style.background = "#181a1d"; } else { navLink.style.display = "none"; navBar.style.background = "none"; } }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar tranform: rotate() en la parte superior e inferior con una transition en el ancho para el tramo medio.
let navToggle = document.querySelector('.nav-toggle') let bars = document.querySelectorAll('.bar') function toggleHamburger(e) { bars.forEach(bar => bar.classList.toggle('x')) } navToggle.addEventListener('click', toggleHamburger) .nav-toggle { display: flex; flex-direction: column; justify-content: space-between; height: 22px; width: 22px; } .nav-toggle .bar { height: 3px; width: 100%; background-color: black; transition: all 100ms ease-in-out; } .nav-toggle:hover { cursor: pointer; } .x:nth-of-type(1) { transition: all 100ms ease-in-out; transform: rotate(45deg); transform-origin: top left; width: 28px; } .x:nth-of-type(2) { transition: all 100ms ease-in-out; transform-origin: center; width: 0; } .x:nth-of-type(3) { transition: all 100ms ease-in-out; transform: rotate(-45deg); transform-origin: bottom left; width: 28px; } <a class="nav-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta