Quiero que se abra el menú de nav cuando se haga clic en el menú de hamburguesas en la primera ul . Utilicé JavaScript para apuntar a la clase nav-list en la segunda ul , pero cuando hago clic, no sucede nada.
Inicialmente tenía el ícono de la hamburguesa y los enlaces en una lista e intenté usar display: none para todo, excepto el primer elemento li, pero me di cuenta de que no podía obtener getElementsByClassName para mostrar el resto de los elementos li al hacer clic.
const toggleButton = document.getElementsByClassName('toggle-button')[0] const navList = document.getElementsByClassName('nav-list')[0] toggleButton.addEventListener('click', () => { navList.classList.toggle('active') }) /* Nav Styling */ .navbar-links ul { margin: 0; padding: 0; display: flex; justify-content: space-around; font-weight: 600; font-size: 18px; } .navbar-links li { list-style-type: none; } .navbar-links li a { text-decoration: none; color: whitesmoke; padding: 1rem; display: block; } .navbar-links li:hover { background-color: #555; } .nav-icon li { display: none; } /* When menu icon clicked, javascript shows nav items */ @media screen and (max-width: 740px) { /* Responsive Navbar */ .nav-icon li { display: block; } .nav-list li { display: none; } .nav-list ul { flex-direction: column; width: 100%; } .nav-list li { text-align: center; } .nav-list li a { padding: .5 rem 1 rem; } /* For Javascript */ .nav-list.active { display: flex; flex-direction: column; } } <nav class="navbar"> <div class="navbar-links"> <ul class="nav-icon" id="nav-icon"> <li> <a href="#" class="toggle-button"> <i class="fa fa-bars"></i> </a> </li> </ul> <ul class="nav-list"> <li><a href="index.html">HOME</a></li> <li><a href="activities.html">SELF-HELP TOOLS</a></li> <li><a href="conditions.html">CONDITIONS</a></li> <li><a href="resources.html">RESOURCES</a></li> <li> <a href="contacts.html">CONTACT</a> </li> </ul> </div> </nav>¿Es esto lo que desea? Cuando hace clic en el icono del menú (aquí se ha dado como A ), la configuración de la lista cambia de fila a columna en los clics posteriores.
Entonces debería (no solo por lo dicho anteriormente) sino display: none on nav-list not on nav-list li como en su function de JavaScript que está toggling en active nav-list not on nav-list li .
Es su llamada cambiar CSS o cambiar la función de JavaScript
const toggleButton = document.getElementsByClassName('toggle-button')[0] const navList = document.getElementsByClassName('nav-list')[0] toggleButton.addEventListener('click', () => { navList.classList.toggle('active') }) /* Nav Styling */ .navbar-links ul { margin: 0; padding: 0; display: flex; justify-content: space-around; font-weight: 600; font-size: 18px; } .navbar-links li { list-style-type: none; } .navbar-links li a { text-decoration: none; color: lightblue; padding: 1rem; display: block; } .navbar-links li:hover { background-color: #555; } .nav-icon li { display: none; } /* When menu icon clicked, javascript shows nav items */ @media screen and (max-width: 740px) { /* Responsive Navbar */ .nav-icon li { display: block; } .nav-list { display: none; } .nav-list ul { flex-direction: column; width: 100%; } .nav-list li { text-align: center; } .nav-list li a { padding: .5 rem 1 rem; } /* For Javascript */ .nav-list.active { display: flex; flex-direction: column; } } <nav class="navbar"> <div class="navbar-links"> <ul class="nav-icon" id="nav-icon"> <li> <a href="#" class="toggle-button"> <i class="fa fa-bars">A</i> </a> </li> </ul> <ul class="nav-list"> <li><a href="index.html">HOME</a></li> <li><a href="activities.html">SELF-HELP TOOLS</a></li> <li><a href="conditions.html">CONDITIONS</a></li> <li><a href="resources.html">RESOURCES</a></li> <li> <a href="contacts.html">CONTACT</a> </li> </ul> </div> </nav>