El código permite abrir un menú emergente el hacer click en el enlace MENÚ, también permite cerrar dicho menú al hacer click de nuevo en el enlace MENÚ y en los enlaces dentro
El HTML contiene a la izquierda una sección donde iría una imagen, como el logotipo de la empresa y a la derecha un enlace, que permite abrir el menú emergente.
El código CSS permite ubicar correctamente cada elemento y darle estilos a los mismos.
EL código de Javascript tiene la función de abrir y cerrar el menú emergente al hacer click en el enlace MENÚ.
//objeto con las propiedades del menu Movil
var propMenu = {
burger_menu: document.getElementById('burger_menu'),
slideMenu: document.getElementById('slideMenu'),
menu_activo: false,
elem_menu: document.querySelectorAll('#slideMenu .menu-principal a')
}
//objeto con los metodos del menu Movil
var metMenu = {
inicio: function(){
propMenu.burger_menu.addEventListener('click', metMenu.toggleMenu);
for (var i = 0; i < propMenu.elem_menu.length; i++){
propMenu.elem_menu[i].addEventListener('click', metMenu.ocultarMenu);
}
},
toggleMenu: function(){
if(propMenu.menu_activo == false){
propMenu.menu_activo = true;
propMenu.menu_activo_aux = true;
propMenu.slideMenu.className = propMenu.slideMenu.className + ' active';
}else{
propMenu.menu_activo = false;
propMenu.slideMenu.className = propMenu.slideMenu.className.replace('active', '');
}
},
ocultarMenu: function(){
propMenu.menu_activo = false;
propMenu.slideMenu.className = propMenu.slideMenu.className.replace('active', '');
},
}
metMenu.inicio();
header .menu-bar-movil {
padding: 0 2.25rem;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 5.876rem; }
header .menu-bar-movil .logo {
max-width: 3.125rem; }
header .menu-bar-movil .burger-menu {
cursor: pointer;
font-size: 2.1875rem; }
header .menu-bar-movil .slideMenu {
position: fixed;
top: 5.875rem;
left: -100%;
background: red;
text-align: center;
padding: 1.25rem 2.25rem;
width: 80%;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; }
header .menu-bar-movil .slideMenu.active {
left: 0; }
header .menu-bar-movil .slideMenu .top-redes {
margin-bottom: 0.625rem; }
header .menu-bar-movil .slideMenu .top-redes a {
padding: 0 0.5625rem; }
header .menu-bar-movil .slideMenu .menu-principal a {
display: block;
padding: 0.625rem 0;
border-top: 1px solid #eaeaea; }
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<header>
<div class="menu-bar-movil">
<a href="#" class="logo">LOGO</a>
<div class="burger-menu" id="burger_menu">MENU</div>
<div class="slideMenu" id="slideMenu">
<div class="top-redes">
<a href="#">F</a>
<a href="#">T</a>
<a href="#">I</a>
</div>
<nav class="menu-principal">
<a href="#portada" class="smoothScroll">Inicio</a>
<a href="#nosotros" class="smoothScroll">Nosotros</a>
<a href="#chef" class="smoothScroll">Nuestro Chef</a>
<a href="#nuestro-menu" class="smoothScroll">Menú</a>
<a href="#contacto" class="smoothScroll">Contacto</a>
</nav>
</div>
</div>
</header>
</body>
EL problema se presenta cuando hago click fuera de dicho Menú emergente, en cualquier parte de la pagina, deseo cerrarlo al hacer click afuera pero no encuentro solución.