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>
event
y buscaevent.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"