Cómo cerrar este sencillo menú JS Hamburger después de hacer clic o seleccionar un elemento del menú. También la posibilidad de una animación slide-in/slide-out con CSS. La animación es solo una ventaja, principalmente solo quiere que el menú se oculte automáticamente cuando se selecciona un elemento.
function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } .topnav { overflow: hidden; background-color: #333; position: relative; } .topnav #myLinks { display: none; } .topnav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } /* Style the hamburger menu */ .topnav a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #04AA6D; color: white; } <div class="topnav"> <a href="#home" class="active">Logo</a> <div id="myLinks"> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> </a> </div>Puede utilizar onclick-events. Agregué algunos a los a del menú.
Aquí está el código:
var x = document.getElementById("myLinks"); function myFunction() { if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function closeNav() { x.style.display = "none"; } .topnav { overflow: hidden; background-color: #333; position: relative; } .topnav #myLinks { display: none; } .topnav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } /* Style the hamburger menu */ .topnav a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #04AA6D; color: white; } <div class="topnav"> <a href="#home" class="active">Logo</a> <div id="myLinks"> <a href="#news" onclick="closeNav();">News</a> <a href="#contact" onclick="closeNav();">Contact</a> <a href="#about" onclick="closeNav();">About</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> </a> </div>Debe alternar la clase .active usando:
function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("mystyle"); }Al usar esto, podrá eliminar o agregar la misma clase simplemente haciendo clic en el elemento (debe llamar a esta función en el evento de clic)