2

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.

1 respuesta 1

0

A través de la función contains atachada al document podemos detectar si se ha hecho un click a determinado elemento dentro de nuestra Web.

Sabiendo esto añadí un escuchador de eventos al document para que en caso de hacer un click en cualquier sitio de la página se llame a la función ocultarMenu y dentro de esta contemplar que si el click se produjo fuera del elemento con clase menu-bar-movil entonces se proceda con la ocultación.

//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);
        document.addEventListener('click', metMenu.ocultarMenu);
        
        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() {
        let click_dentro = document.getElementsByClassName('menu-bar-movil')[0].contains(event.target);

        if (!click_dentro) {
           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>

Tu Respuesta

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

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