Así que estaba creando una barra de navegación receptiva para el menú de hamburguesas. Terminé la mayor parte del trabajo, pero me quedé atascado en un punto. El problema es que apliqué el detector de eventos javascript onClick en el div .burger para que cambie la opacidad del .nav-container a 1. Hasta este punto, esto funciona bien. El problema es que este evento de clic solo funciona en algunas áreas del .burger . Me gusta si se hace clic en las líneas en él o en algún lugar a la derecha. Parece que no puedo encontrar el problema. ¿Puede alguien ayudarme con esto? Gracias por adelantado.
Aquí está mi código
function showNav() { var nav = document.getElementById("nav"); nav.classList.add("show-nav"); } * { margin: 0px; padding: 0; box-sizing: border; } .container { display: flex; margin-top: 2%; } header { position: relative; z-index: 1; } .line1, .line2, .line3 { width: 40px; height: 8px; background-color: black; margin-top: 3px; } .nav-heading { flex: 4; margin-left: 5%; } .burger { flex: 1; margin-left: 40%; background-color: red; padding: 0; width: auto; } .nav-container { position: absolute; width: 100%; opacity: 0; transition: .2s ease-in-out; transform: translateY(-20%); transform-origin: left; ul { display: flex; flex-direction: column; background-color: blue; width: 100%; align-items: center; list-style-type: none; li { flex: 1; padding: 15px; } } } .show-nav { opacity: 1; transform: translateY(20%); } <header> <div class="container"> <div class="nav-heading"> <h1>Navbar</h1> </div> <div class="burger" onclick="showNav()"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </div> <div class="nav-container" id="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> </header>Simplemente ponga z-index = 1 en .burger.
.burger { flex: 1; margin-left: 40%; background-color: red; padding: 0; width: auto; z-index: 1; }para traer su menú al frente, puede agregar position:relative + z-index:1; para asegurarse de que esté en la parte superior.
También agrega el cursor: pointer; para mostrar que es un elemento en el que se puede hacer clic :)
Para la clase que agregue, podría usar classList . toggle() , por lo que muestra/oculta alternativamente.
ejemplo
function showNav() { var nav = document.getElementById("nav"); nav.classList.toggle("show-nav"); } * { margin: 0px; padding: 0; box-sizing: border; } .container { display: flex; margin-top: 2%; } header { position: relative; z-index: 1; } .line1, .line2, .line3 { width: 40px; height: 8px; background-color: black; margin-top: 3px; } .nav-heading { flex: 4; margin-left: 5%; } .burger { flex: 1; margin-left: 40%; background-color: red; padding: 0; width: auto; cursor: pointer; position:relative; z-index:1 } .nav-container { position: absolute; width: 100%; opacity: 0; transition: .2s ease-in-out; transform: translateY(-20%); transform-origin: left; } ul { display: flex; flex-direction: column; background-color: blue; width: 100%; align-items: center; list-style-type: none; } li { flex: 1; padding: 15px; } li a { color: black; } .show-nav { opacity: 1; transform: translateY(20%); } <header> <div class="container"> <div class="nav-heading"> <h1>Navbar</h1> </div> <div class="burger" onclick="showNav()"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </div> <div class="nav-container" id="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> </header>Solo cambia el ancho de
.nav-container { width: 30%; }para que no se superponga a la hamburguesa. En general, su estructura CSS no es buena.