Así que estaba tratando de hacer una cruz para mi menú, pero parece que no funciona. Aquí está el código y también estoy usando js para rotarlo 45 grados: incluso después de cambiar el origen, no funciona y se niega a hacer una cruz perfecta. IMAGEN DE LA CRUZ
JS:
document.addEventListener('DOMContentLoaded', function(){ let nav = document.getElementById('nav-toogle') let bars = document.querySelectorAll(".open") let active = false; document.querySelector('#nav_menu').addEventListener('click', function(){ if(!active){ bars[0].style.transform = "rotate(45deg)" bars[1].style.opacity = "0" bars[2].style.transform = "rotate(-45deg)" nav.style.maxHeight = "0vh"; nav.style.minHeight = "100vh"; active = true; } else{ bars[0].style.transform = "rotate(0deg)" bars[1].style.opacity = "1" bars[2].style.transform = "rotate(0deg)" nav.style.minHeight = "0vh"; nav.style.maxHeight = "0vh"; active = false;HTML:
<div class="menu" id="nav_menu"> <span class="open"></span> <span class="open"></span> <span class="open"></span> </div>CSS:
.open{ width: 30px; height: 1px; background-color: var(--secondary); margin-bottom: 5px; transform-origin: left; } .menu{ position: fixed; top: 3.5em; right: 3.5em; width: 30px; height: 30px; display:none; cursor: pointer; justify-content: center; align-items: center; }Hacer estilos en JS puede complicarse rápidamente, por lo que recomiendo alternar una clase css
const navMenu = document.getElementById('nav_menu'); navMenu.addEventListener('click', function() { navMenu.classList.toggle("cross"); }) Para el css no necesita el tranform-origin . Un translateY es suficiente aquí
#nav_menu.cross .open:nth-child(1) { transform: translateY(6px) rotate(45deg); } #nav_menu.cross .open:nth-child(2) { opacity: 0; } #nav_menu.cross .open:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }