Configuré mi navber usando Tailwind CSS y pude hacerlo receptivo. Cuando se ven en una pantalla más pequeña, los enlaces de navegación se muestran uno debajo del otro en forma de bloque flexible. Sin embargo, cuando se ve en una ventana móvil, los enlaces de navegación se muestran de forma predeterminada. Implementé un botón en el que se puede hacer clic para mostrarlo y ocultarlo, pero ¿cómo puedo usar javascript para escribir el código para que funcione? Aquí hay un fragmento de mi código:
<script src="https://cdn.tailwindcss.com"></script> <!--Navbar--> <nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg"> <div class="flex items-center flex-shrink-0 text-green-600 mr-6"> <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20"> <span class="font-bold text-2xl tracking-tight">First Last</span> </div> <div class="block md:hidden"> <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> </div> <div class="w-full block md:flex md:items-center md:w-auto"> <div class="text-sm md:flex-grow"> <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a> <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a> <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a> <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a> </div> </div> </nav>
block md:flex a hidden md:flex que ocultará el menú en las pantallas móviles.Element.classList.toggle para alternar la clase hidden cuando se hace clic en el botón en las pantallas móviles.Prueba esto
document.addEventListener('DOMContentLoaded', function(){ let menu = document.getElementById('navbar-menu'); document.getElementById('navbar-toggler').addEventListener('click', event => { menu.classList.toggle('hidden') }) }) <script src="https://cdn.tailwindcss.com"></script> <!--Navbar--> <nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg"> <div class="flex items-center flex-shrink-0 text-green-600 mr-6"> <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20"> <span class="font-bold text-2xl tracking-tight">First Last</span> </div> <div class="block md:hidden"> <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> </div> <div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu"> <div class="text-sm md:flex-grow"> <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a> <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a> <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a> <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a> </div> </div> </nav>Puede usar Javascript para seleccionar el elemento por su id y agregar o eliminar clases/estilos para lograr el efecto de alternancia.
ex:
const navbar = document.querySelector("#navbar"); if (navbar.classList.contains("something"){ someelement.style.display = "none"; anotherElement.style.display = "block"; navbar.classList.add("someClass"); }Aquí hay un código de ejemplo para el mismo. https://codepen.io/ljc-dev/pen/MWoRayy