Traté de hacer un menú de hamburguesas.
Aquí está mi HTML:
<nav> <h3>Life Below Water</h3> <ul class="ul"> <li><a href="" class="nav">Donate</a></li> <li><a href="https://sdgs.un.org/goals" class="nav">Visit SDG.UN</a></li> </ul> <a href="#" class="toggle" id="menuicon"><i class="fas fa-bars"></i></a> </nav>Aquí está mi JS:
const toggle = document.getElementByClassName('menuicon')[0] const navBar = document.getElementByClassName('ul')[0] menuicon.addEventListener('click', () =>{ navBar.classList.toggle('active') })No expande el menú cuando hago clic en el ícono de la hamburguesa.
getElementByClassName debe ser getElementsByClassName :
const toggle = document.getElementsByClassName('menuicon')[0] const navBar = document.getElementsByClassName('ul')[0] menuicon.addEventListener('click', () =>{ navBar.classList.toggle('active') }) .ul{ display:none; } .active{ display:block; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <nav> <h3>Life Below Water</h3> <ul class="ul"> <li><a href="" class="nav">Donate</a></li> <li><a href="https://sdgs.un.org/goals" class="nav">Visit SDG.UN</a></li> </ul> <a href="#" class="toggle" id="menuicon"><i class="fas fa-bars"></i></a> </nav>