https://codepen.io/brunhild_912/pen/MWQPErp
Aquí está mi código. Estoy tratando de habilitar la alternancia de la lista de navegación, pero no está sucediendo. ¿Por qué? Cualquier orientación o consejo sobre este tema es bienvenido. He probado muchas opciones, pero desafortunadamente es obstinado.
HTML
<button type="button" class="nav-toggler"> <span></span> </button> <!--Navbar--> <nav class="nav"> <ul> <li class="nav=item"><a href="#home">Home</a></li> <li class="nav=item"><a href="#about">About</a></li> <li class="nav=item"><a href="#our-menu">Menu</a></li> <li class="nav=item"><a href="#testimonials">Testimonials</a></li> <li class="nav=item"><a href="#team">Team</a></li> <li class="nav=item"><a href="#contact">Contact</a></li> </ul> </nav>CSS
.header .nav-toggler{ height: 40px; width: 44px; margin-right: 15px; cursor: pointer; border: none; background-color: transparent; display: flex; align-items: center; justify-content: center; } .header .nav-toggler.active{ position: absolute; right: 0; z-index: 1; } .header .nav{ position: fixed; right: 0; top: 0; height: 100%; width: 280px; background-color: var(--main-color); box-shadow: var(--shadow); overflow-y: auto; padding: 80px 0 40px; transform: transform 0.5s ease; transform: translateX(100%); } .header .nav .open{ transform: translateX(0%); }JavaScript
const navToggler = document.querySelector(".nav-toggler"); navToggler.addEventListener("click", toggleNav); function toggleNav(){ navToggler.classList.toggle(".active"); document.querySelector(".nav").classList.toggle(".open"); }El primer problema que tiene es que necesita eliminar el archivo . (punto) de sus referencias de clase ( toggle(".active") ). Haciendo su método toggleNav como:
function toggleNav(){ navToggler.classList.toggle("active"); document.querySelector(".nav").classList.toggle("open"); } Además, en su css hace referencia a un objeto con una clase .header que no existe. Entonces necesitarías envolver todo tu html con:
<div class='header'> ... [YOUR HTML CODE] </div> Además, en su css su declaración: .header .nav .open Debería ser: .header .nav.open
Necesita un poco de trabajo CSS para que funcione sin problemas, pero esto debería indicarle la dirección correcta.
Hay algunos problemas de JS y css en su código. verifique el siguiente código.
const navToggler = document.querySelector(".nav-toggler"); navToggler.addEventListener("click", toggleNav); function toggleNav(){ navToggler.classList.toggle("active"); document.querySelector(".nav").classList.toggle("open"); } .header .nav-toggler{ height: 40px; width: 44px; margin-right: 15px; cursor: pointer; border: none; background-color: transparent; display: flex; align-items: center; justify-content: center; background: red; } .header .nav{ position: fixed; right: 0; top: 0; height: 100%; width: 280px; background-color: var(--main-color); box-shadow: var(--shadow); overflow-y: auto; padding: 80px 0 40px; transition: transform 0.5s ease; transform: translateX(100%); } .header .nav.open{ transform: translateX(0%); } <div class="header"> <button type="button" class="nav-toggler"> <span></span> </button> <!--Navbar--> <nav class="nav"> <ul> <li class="nav=item"><a href="#home">Home</a></li> <li class="nav=item"><a href="#about">About</a></li> <li class="nav=item"><a href="#our-menu">Menu</a></li> <li class="nav=item"><a href="#testimonials">Testimonials</a></li> <li class="nav=item"><a href="#team">Team</a></li> <li class="nav=item"><a href="#contact">Contact</a></li> </ul> </nav> </div> const navToggler = document.querySelector(".nav-toggler"); navToggler.addEventListener("click", toggleNav); function toggleNav(){ navToggler.classList.toggle("active"); document.querySelector("nav").classList.toggle("open"); } .header .nav-toggler{ height: 40px; width: 44px; margin-right: 15px; cursor: pointer; border: none; background-color: transparent; display: flex; align-items: center; justify-content: center; } .header .nav-toggler.active{ position: absolute; right: 0; z-index: 1; } .header .nav{ position: fixed; right: 0; top: 0; height: 100%; width: 280px; background-color: var(--main-color); box-shadow: var(--shadow); overflow-y: auto; padding: 80px 0 40px; transform: transform 0.5s ease; transform: translateX(100%); } .header .nav.open{ transform: translateX(0%); } <div class="header"> <button type="button" class="nav-toggler active"> <span>button</span> </button> <!--Navbar--> <nav class="nav open"> <ul> <li class="nav=item"><a href="#home">Home</a></li> <li class="nav=item"><a href="#about">About</a></li> <li class="nav=item"><a href="#our-menu">Menu</a></li> <li class="nav=item"><a href="#testimonials">Testimonials</a></li> <li class="nav=item"><a href="#team">Team</a></li> <li class="nav=item"><a href="#contact">Contact</a></li> </ul> </nav> </div>Problemas en el código
classList.toggle(".active"); . en una cadena como classList.toggle("active");
agregar <div> principal en la clase de código lateral es .header
elimine el espacio entre .header .nav .open .header .nav.open en css