2

Estoy tratando de hacer un burguermenu con JavaScript, con el fin de que pueda ser abierto con el botón, pero cerrado, bien pulsando en el botón, así como pulsando fuera de la ventana del menú. No sé por qué motivo, primero, una vez cierras el menú pulsando fuera, requieren 2 clicks en el botón abrir el menu y segundo, una vez he subido el código al host.

En Opera no funciona pulsar el botón para cerrar, cosa que en local y Firefox sí.

Adjunto la web que en este punto son muchas cosas las que tienen el código, necesario para correr una página. Para ver el burguer menu tenéis que hacer la pestaña más pequeña.

https://mingographics.com

Adjunto aquí el código de JavaScript, que probablemente sea desastroso, pues, mis conocimientos en ese lenguaje son muy cortos.

Si es necesario algo más puedo aportarlo.

const $menu = $(".menu-nav");
var activador = false;
var dentro = false;

$(document).mouseup((e) => {
  if (!$menu.is(e.target)) {
    dentro = true;
    $menu.removeClass("menu-active");
  }
});

$(".menu-button").on("click", () => {
  if (activador == false) {
    $menu.addClass("menu-active");
    activador = true;
  } else {
    $menu.removeClass("menu-active");
    activador = false;
  }
});

2 respuestas 2

3

No necesitas definir una variable activado, simplemente usa el método .css que ofrece jQuery para saber si nuestro elemento no tiene un display none

$("#expandMenu").on("click", () => {
  if ($(".menu").css("display") == "none") {
    $(".menu").css("display", "block");
  } else {
    $(".menu").css("display", "none");
  }
});
body {
  font-family:Arial;
  margin:0;
}

.menu {
  padding:20px;
  background:#f6f6f6;
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <p>Hello world</p>
</div>

<p><button id="expandMenu">Expandir</button></p>

Debido a que defines una variable los valores no se guardan correctamente y requiere de dos clicks


Además ten en cuenta que con propiedades como transform, transition, etc.. Tienes que poner los prefijos:

  • -moz => Firefox
  • -o => Opera
  • -webkit => Safari
1
  • Pero y como se programaria con la variable .css para que se cierre fuera de la ventana? Osea en el ejemplo no cierra fuera de la ventana y creo que si entiendo el codigo que pones no esta programada esa parte no? Commented el 24 ene. 2021 a las 11:06
2

No necesitas las variables adicionales, jQuery tiene algunos métodos que pueden serte útiles:

  • $.toggleClass(): Agrega la clase especificada si el elemento aún no la tiene o la elimina si ya la tiene
  • $.has(): Te permite saber si un elemento está contenido dentro de otro

Consejo: En lugar de mouseup usa el evento click para determinar en qué momento cerrar el menú.

// Definir variable para menú
const $menu = $(".menu-nav");
// Definir variable para botón Abrir/Cerrar
const menuBtn = $(".menu-button");

menuBtn.on("click", () => {
    // Agregar o quitar clase activa
    $menu.toggleClass("menu-active");
});

// Escuchar clics "fuera" del menú para cerrarlo
$(document).on("click", (e) => {
    if (
        !$menu.is(e.target) &&    // No fue en el menú
        !$menu.has(e.target) &&   // Tampoco en los hijos del menú
        !menuBtn.is(e.target)     // Ni en el botón
    ) {
        // Cerrar menú quitando clase activa
        $menu.removeClass("menu-active");
    }
});

Actualización:

En tu código original usas la variable activador para determinar si el menú se debe desplegar o cerrar y la controlas correctamente cuando se hace clic en el botón; sin embargo, cuando se hace clic fuera del menú también debes actualizar la variable, porque pasa esto:

  1. Abres el menú con clic en botón, activador = true
  2. Cierras el menú con clic fuera de él, no actualizas variable, sigue siendo true
  3. Clic nuevamente en el botón, pero la variable indica que está abierto y no lo abre, activador = false
  4. Otra vez clic en el botón y, como se actualizó la variable en el clic anterior, ahora sí lo abre
$(document).mouseup((e) => {
  if (!$menu.is(e.target)) {
    dentro = true;
    /* **********  Actualizar variable ********** */
    activador = false;
    $menu.removeClass("menu-active");
  }
});
2
  • Hola, entiendo lo que pones y me queda mucho mas claro, pero no se porque no me funciona el cierre cuando pulso fuera, las clases estan bien puestas, y con mis conocimientos basicos de js lo veo bien... no entiendo que pasa. Commented el 24 ene. 2021 a las 11:46
  • Revisa la actualización de la respuesta, ahí te explico porqué se requieren dos clics después de clic fuera del menú.
    – Triby
    Commented el 24 ene. 2021 a las 12:47

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.