0

He visto por ahí un menú responsive sencillo y que quisiera colocar en mi blog, pero no tengo ni idea de javascript y aunque me parece muy mono, veo que es incómodo que no se oculte cuando se hace click fuera de él, o cuando el ratón no esté encima suyo. ¿Alguna solución?

El código original es el publicado en w3schools.com y es este:

 <html> <head> <meta name="viewport" content="width=device-width,
 initial-scale=1"> <link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style> body {   margin: 0;   font-family: Arial, Helvetica,
 sans-serif; }

 .topnav {   overflow: hidden;   background-color: #333; }

 .topnav a {   float: left;   display: block;   color: #f2f2f2;  
 text-align: center;   padding: 14px 16px;   text-decoration: none;  
 font-size: 17px; }

 .topnav a:hover {   background-color: #ddd;   color: black; }

 .active {   background-color: #4CAF50;   color: white; }

 .topnav .icon {   display: none; }

 @media screen and (max-width: 600px) {   .topnav a:not(:first-child)
 {display: none;}   .topnav a.icon {
     float: right;
     display: block;   } }

 @media screen and (max-width: 600px) {   .topnav.responsive {position:
 relative;}   .topnav.responsive .icon {
     position: absolute;
     right: 0;
     top: 0;   }   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;   } } </style> </head> <body>

 <div class="topnav" id="myTopnav">   <a href="#home"
 class="active">Home</a>   <a href="#news">News</a>   <a
 href="#contact">Contact</a>   <a href="#about">About</a>   <a
 href="javascript:void(0);" class="icon" onclick="myFunction()">
     <i class="fa fa-bars"></i>   </a> </div>

 <script> function myFunction() {   var x =
 document.getElementById("myTopnav");   if (x.className === "topnav") {
     x.className += " responsive";   } else {
     x.className = "topnav";   } } </script>

 </body> </html>
6
  • Link de W3Schools?
    – user85192
    Commented el 16 ene. 2019 a las 9:26
  • w3schools.com/howto/howto_js_topnav_responsive.asp
    – Beeril
    Commented el 16 ene. 2019 a las 9:30
  • Al hacer click, recoge el objeto event y busca event.target para saber donde se está haciendo click. luego pones la condicion de que sea distinto del area y asi sabes si estás pulsando "fuera"
    – lois6b
    Commented el 16 ene. 2019 a las 9:43
  • Wow, muchas gracias por la respuesta! Desgraciadamente, no sé cómo plasmarlo en código, ya que no tengo ni idea de Javascript... ¿Podrías ayudarme, por favor?
    – Beeril
    Commented el 16 ene. 2019 a las 9:51
  • 2
    Investiga lo comentado e intentalo. es muy importante que investigues y pruebes para aprender mejor. nosotros ayudamos con problemas concretos, no tareas. cuando lo hayas intentado, si no te sale, añade a la pregunta tu codigo y el problema especifico que tienes. Un saludo
    – lois6b
    Commented el 16 ene. 2019 a las 9:56

1 respuesta 1

1

He cambiado el código para que funcione con click. Lo que hacemos es añadir un evento onload para que sea lo primero que se ejecute. En él asignamos al document, en el evento onclick, la llamada a myFunction pasándole el evento (event). En myFunction comprobamos en qué elemento se ha hecho click. Si se ha hecho click en el menú (fíjate que he puesto dos ids en el HTML: menu y menui) se muestra el menú si no está ya mostrándose, si se está mostrando se oculta. Y si haces click fuera del menú también se oculta.

function binding() {
    document.onclick = function(event){
    myFunction(event);
    }
  }

window.onload = binding;
      
function myFunction(e) {
    var x = document.getElementById("myTopnav");
    if(e.target.id==="menu" || e.target.id==="menui"){
      if (!x.classList.contains("responsive")){
          x.className += " responsive";
      } 
      else {
          x.className = "topnav";
      }  
    }
    else
    {
      x.className = "topnav";
    }
}
body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

            .topnav a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                }

        .active {
            background-color: #4CAF50;
            color: white;
        }

        .topnav .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }

                .topnav.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                }
        }
<html>
<head>
    <meta name="viewport" content="width=device-width,
 initial-scale=1">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <div class="topnav" id="myTopnav">
        <a href="#home"
           class="active">Home</a>   <a href="#news">News</a>   <a href="#contact">Contact</a>   <a href="#about">About</a>   <a href="javascript:void(0);" id="menu" class="icon">
            <i class="fa fa-bars" id="menui"></i>
        </a>
    </div>
</body>
</html>

3
  • Estoy haciendo pruebas, combinando opciones, y con onmouseover es imposible acceder a los items del menú, jajaja
    – Beeril
    Commented el 16 ene. 2019 a las 10:19
  • Tienes razón XD. Lo cambio.
    – Kiko_L
    Commented el 16 ene. 2019 a las 10:26
  • Olé, qué crack! Gracias! Estoy intentando también añadirle un onmouseout, para que, además del clik exterior, se oculte solo, pero no me sale, jajaja: function binding() { document.onclick = function(event){ myFunction(event); } document.onmouseout = function(event){ myFunction(event); } }
    – Beeril
    Commented el 16 ene. 2019 a las 10:49

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.