2

por curiosidad estaba probando una opción de menú desplegable de manera lateral de un video, lo que me dio curiosidad es que en el mismo no se puede ocultar el menu con dar un clic por fuera, por lo cual, debe poder hacerse con una propiedad o algo, me gustaria saber cual es y como se compone sus elementos.

Este es el código que uso. Html:

</head>
<body>
    <header class="header">
        <div class="container">
        <div class="btn-menu">
            <label for="btn-menu">☰</label>
        </div>
            <div class="logo">
                <h1>Menu</h1>
            </div>
            <nav class="menu">
                <a href="#">Inicio</a>
                <a href="#">Nosotros</a>
                <a href="#">Blog</a>
                <a href="#">Contacto</a>
            </nav>
        </div>
    </header>
    <div class="capa"></div>
<!--    --------------->
<input type="checkbox" id="btn-menu">
<div class="container-menu">
    <div class="cont-menu">
        <nav>
            <a href="#">Portafolio</a>
            <a href="#">Servicios</a>
            <a href="#">Suscribirse</a>
            <a href="#">Facebook</a>
            <a href="#">Youtube</a>
            <a href="#">Instagram</a>
        </nav>
        <label for="btn-menu">❌</label>
    </div>
</div>
</body>
3
  • 1
    Con html solamente no podremos hacer mucho @Sebastian Casadiego, supongo que tendras algo de CSS en el codigo, lo podrias poner para ver como queda del todo. Alomejor tienes algo de javascript también podria ser. Commented el 29 mar. 2022 a las 6:29
  • 1
    Y pon el HTML completo, con todo su head, así veremos que librerias de javascript y CSS estas usando
    – masterguru
    Commented el 29 mar. 2022 a las 6:30
  • Si uso css, si quieren lo pongo Commented el 29 mar. 2022 a las 17:45

1 respuesta 1

2

Muy buena observacion la tuya, he visto webs de renombre que esto no lo cumplen.

una forma que a mi me funciona es la siguiente:

document.querySelector('.boton').addEventListener('click', ()=>{
 event.stopPropagation();
 document.querySelector('.menu').classList.toggle('show')
})

window.onclick = function (e) {
 document.querySelector('.menu').classList.remove('show')
}
body{
   padding: 0;
   margin: 0;
  }
  a{
   display: block;
   width: 100px;
   text-align: center;
   text-decoration: none;
   background: red;
   color: white;
   padding: 16px;
  }
  ul{
   background: grey;
   width: 150px;
   padding: 0;
   text-align: center;
  }
  li{
   list-style: none;
   padding: 5px;
   color: white;
  }
  li:hover{
   background-color: lightslategray;
  }
  .menu{
   display: none;
  }
  .show{
   display: inline-block;
  }
<menu>
 <a class="boton" href="#/">Click aqui</a>
 <ul class="menu show">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
 </ul>
</menu>

funciona de la siguiente manera: debes hacer que el evento que dispara el menu (en este caso el boton) no propague el click hacia los demas elementos (tema bastante complejo de explicar, propagacion de burbuja y demas), esto se consigue con e.stopPropagation(). Despues pongo un listener al objeto window que lo que hace es que sea donde sea que hagas click va a remover la clase show del menu (si la tiene la saca y sino no hace nada). Espero te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.