Estoy haciendo una pregunta muy específica que creo que es realmente fácil de solucionar, pero no sé cuál es el problema. Básicamente, estoy haciendo una barra de navegación receptiva, solo tiene 3 elementos de la lista UL, nada más, también tengo un ícono de hamburguesa para tamaños móviles, funciona perfectamente, cuando hago clic en él, aparecen los elementos de la lista, pero hay una cosa Ojalá fuera diferente. Cuando hago clic en el ícono, quiero que los elementos de mi lista aparezcan con una transición suave, simplemente aparecen directamente. Intenté agregar el método de transición al css pero no tengo idea de por qué no funciona. Aquí están las imágenes y el código css a continuación: Antes de hacer clic Después de hacer clic
const menuBtn = document.querySelector(".menu-btn"); const navUL = document.querySelector(".nav-ul"); let menuOpen = false; menuBtn.addEventListener("click", () => { if(!menuOpen){ menuBtn.classList.add("open"); navUL.classList.add("show") menuOpen = true; }else { menuBtn.classList.remove("open"); navUL.classList.remove("show") menuOpen = false; } }) nav ul { display: none; margin: 0; padding: 0; list-style: none; } .nav-ul.show { display: flex; padding-left: 1em; padding-top: 1em; } nav li { display: inline-block; margin: 1em; } nav a { font-weight: 900; text-decoration: none; text-transform: uppercase; font-size: 1rem; padding: 0.5em; color: #6F69AC; } <nav> <div class="menu-btn"> <div class="menu-btn_burger"> [BURGER ICON] </div> </div> <ul class="nav-ul"> <li><a href="">About</a></li> <li><a href="">Art</a></li> <li><a href="">Projects</a></li> </ul> </nav>Cualquier ayuda sería apreciada <3
Espero que pueda ayudarte.
CSS
nav ul { display: flex; padding: 0 1em; margin: 0; list-style: none; } .nav-ul { max-width: 0; overflow: hidden; transition: all .3s ease; } nav li { display: inline-block; margin: 1em; } nav a { font-weight: 900; text-decoration: none; text-transform: uppercase; font-size: 1rem; padding: 0.5em; color: #6F69AC; }JS
const menuBtn = document.querySelector(".menu-btn"); const navUL = document.querySelector(".nav-ul"); let menuOpen = false; menuBtn.addEventListener("click", () => { if (!menuOpen) { menuBtn.classList.add("open"); navUL.style.maxWidth = navUL.scrollWidth + 'px'; menuOpen = true; } else { menuBtn.classList.remove("open"); navUL.style.maxWidth = null; menuOpen = false; } })HTML
<nav> <div class="menu-btn"> <div class="menu-btn_burger"> </div> </div> <div class="nav-ul"> <ul> <li><a href="">About</a></li> <li><a href="">Art</a></li> <li><a href="">Projects</a></li> </ul> </div> </nav>Puede eliminar otras propiedades de visualización y visibilidad para manipular su ocultamiento
const menuBtn = document.querySelector(".menu-btn"); const navUL = document.querySelector(".nav-ul"); let menuOpen = false; menuBtn.addEventListener("click", () => { if(!menuOpen){ menuBtn.classList.add("open"); navUL.classList.add("show") menuOpen = true; }else { menuBtn.classList.remove("open"); navUL.classList.remove("show") menuOpen = false; } }) nav ul { transform: translateX(-100%); margin: 0; padding: 0; list-style: none; overflow: hidden; transition: transform 0.5s; position: absolute; } .nav-ul.show { transform: translateX(0); padding-left: 1em; padding-top: 1em; } nav li { display: inline-block; margin: 1em; } nav a { font-weight: 900; text-decoration: none; text-transform: uppercase; font-size: 1rem; padding: 0.5em; color: #6F69AC; } <nav> <div class="menu-btn"> <div class="menu-btn_burger"> [BURGER ICON] </div> </div> <ul class="nav-ul"> <li><a href="">About</a></li> <li><a href="">Art</a></li> <li><a href="">Projects</a></li> </ul> </nav>