Actualmente estoy tratando de hacer que mi página web sea un poco más receptiva. En este momento, en resolución móvil, tengo el icono de mi hamburguesa en la esquina superior derecha y, al hacer clic en él, aparece un menú debajo de la barra de navegación. Sin embargo, aparece inmediatamente. Me gustaría hacer la transición un poco más suave para que el div (su pantalla se alterna mediante javascript de none a flex) se deslice desde la parte superior de una manera agradable. Estoy usando el marco Tailwind.

Código relacionado con HTML aquí:

 <!-- Mobile menu --> <div class="hidden mobile-menu w-screen h-screen uppercase max-w-full"> <ul class="h-4/6 py-24 flex flex-col items-center justify-evenly text-xl"> <li class="mobile-menu-link"><a href="./index.html#omne" class="px-2 py-4">O mně</a></li> <li class="mobile-menu-link"><a href="./index.html#cenik" class="px-2 py-4">Ceník</a></li> <li class="mobile-menu-link"><a href="./index.html#faq" class="px-2 py-4">FAQ</a></li> <li class="mobile-menu-link"><a href="./index.html#contact" class="px-2 py-4">Kontakt</a></li> </ul> </div>

y aquí JavaScript:

 /* MOBILE MENU NAVBAR */ // find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it window.addEventListener('DOMContentLoaded', (event) => { // Grab HTML Elements const btn = document.querySelector(".mobile-menu-button"); const menu = document.querySelector(".mobile-menu"); const links = document.querySelectorAll(".mobile-menu-link") // Add Event Listeners btn.addEventListener("click", () => { menu.classList.toggle("hidden"); }); links.forEach((link) => { link.addEventListener("click", () => { menu.classList.toggle("hidden"); }); }); }); /* END OF MOBILE MENU NAVBAR */

Intenté establecer la transición del div principal en algunos valores, pero no sucedió nada. Siento que la función de transición solo funciona para algunos elementos. Realmente no entiendo la función de transición porque a veces tiene lugar para: pasar el mouse a veces para alguna acción diferente. Es realmente confuso para mí. Se agradece mucho cualquier ayuda.

PD: También puedes consultar el estado actual de la página aquí .

Gracias por adelantado