Hola a todos, he estado luchando con el menú de navegación y haciendo que se active y desactive, parece que se activa y desactiva en las herramientas de desarrollo, pero los enlaces li no desaparecen, he intentado volver a escribir el código, pero aún puedo No conseguí que funcionara, verifiqué dos veces para asegurarme de que estaba seleccionando los elementos correctos, por favor, si alguien puede ayudar, ¡se lo agradecería sinceramente! Gracias aquí está el código:
const showMenu = (toggleId, navId) => { const toggle = document.getElementById(toggleId), nav = document.getElementById(navId) if (toggle && nav) { toggle.addEventListener("click", () => { nav.classList.toggle("show"); }) } }; showMenu('nav-toggle', 'nav-menu'); <link rel="stylesheet" href="practice.css"> <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> <header class="1-header" id="header"> <nav class="nav bd-grid"> <div class='nav_toggle' id='nav-toggle'> <i class="bx bxs-grid"></i> </div> <!-- <a href="#" class="nav_logo">Roby</a> --> <a href="#" class="nav_logo">Sneaker Warehouse</a> <div class='nav_menu' id='nav-menu'> <ul class="nav_list"> <li class="nav_item"><a href="#home" class="nav_link active">Home</a></li> <li class="nav_item"><a href="#featured" class="nav_link">Featured</a></li> <li class="nav_item"><a href="#women" class="nav_link">Women</a></li> <li class="nav_item"><a href="#new" class="nav_link">New</a></li> <li class="nav_item"><a href="./shop.html" class="nav_link">Shop</a></li> </ul> </div> <div class="nav_shop"> <i class="bx bx-shopping-bag"></i> </div> </nav> </header> <script src="practice.js"></script> <script src="https://unpkg.com/boxicons@2.1.1/dist/boxicons.js"></script>Lo hice funcionar leyendo uno de los comentarios en esta publicación. olvidaste agregar el css.
html
<link rel="stylesheet" href="practice.css"> <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> <header class="1-header" id="header"> <nav class="nav bd-grid"> <div class='nav_toggle' id='nav-toggle'> <i class="bx bxs-grid"></i> </div> <!-- <a href="#" class="nav_logo">Roby</a> --> <a href="#" class="nav_logo">Sneaker Warehouse</a> <button class='nav_menu' id='nav-menu'> <ul class="nav_list"> <li class="nav_item"><a href="#home" class="nav_link active">Home</a></li> <li class="nav_item"><a href="#featured" class="nav_link">Featured</a></li> <li class="nav_item"><a href="#women" class="nav_link">Women</a></li> <li class="nav_item"><a href="#new" class="nav_link">New</a></li> <li class="nav_item"><a href="./shop.html" class="nav_link">Shop</a></li> </ul> </button> <div class="nav_shop"> <i class="bx bx-shopping-bag"></i> </div> </nav> </header> <script src="practice.js"></script> <script src="https://unpkg.com/boxicons@2.1.1/dist/boxicons.js"></script>js
const showMenu = (toggleId, navId) => { const toggle = document.getElementById(toggleId), nav = document.getElementById(navId) if (toggle && nav) { toggle.addEventListener("click", () => { nav.classList.toggle("show"); toggle.classList.toggle("show"); }) } }; showMenu('nav-toggle', 'nav-menu');CSS
.nav_menu { display: none; } .show { display: initial; }