0

Hola buenas querria saber como hacer este menu responsive que no solo cliquee en la hamburguesa para hacer toggle (que ya esta hecho) sino cliquear fuera en cualquier parte del documento para hacerle removeClass, he intentado usar $("*not:.hamburgesa").removeClass dentro del if cuando YA tiene esa clase, para quitarsela cuando cliqueo en cualquier parte excepto en el propio menu, pero no me sale. gracias

  $(document).ready(function(){
  
    $('.hamburgesa').on('click', function(){
    $('nav').toggleClass('apareceMenu');

    if ( $('nav').hasClass('apareceMenu') ) {

      // a rellenar

    }

  });
  });

  
.hamburgesa {
	position: fixed;
	top: -6px;
	right: 10px;
	cursor: pointer;
	color: black;
	font-size: 3em;
	text-shadow: 0 0 10px white;
	z-index: 9999;
}


nav{
    width: 250px;
    height: 100vh;
    border-right: 1px solid #999;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  nav.apareceMenu{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  nav ul{
    float: none;
  }

  nav li{
    display: block;
    text-align: left;
  }

  nav a {
    line-height: 14vh;
    font-size: 11px;
    font-weight: 600;
  }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>responsive menu</title>
  </head>
  <body>
    <span class="hamburgesa">&equiv;</span>

    <nav>
    <ul>
      <li><a href="#hero" class="menu" data-id="#hero">Inicio</a></li>
      <li><a href="#nosotros" class="menu" data-id="#nosotros">Nosotros</a></li>
      <li><a href="#productos" class="menu" data-id="#productos">Productos</a></li>
      <li><a href="#calidad" class="menu" data-id="#calidad">Calidad</a></li>
      <li><a href="#logistica" class="menu" data-id="#logistica">Logística</a></li>
      <li><a href="#environment" class="menu" data-id="#environment">Medio ambiente</a></li>
      <li><a href="#contacto" class="menu" data-id="#contacto">Contacto</a></li>
    </ul>
  </nav>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

1 respuesta 1

0

Si bien se puede realizar siguiendo la lógica que planteas, el código resultante es, a mi gusto, demasiado enredado.

Una opción para llevar a cabo lo que buscas es:

  • Suscribirse al evento click del document y si el nav tiene la clase apareceMenu, removerlo.

  • Para evitar que el menú se cierre inmediatamente después de presionar en el elemento con clase .hamburgesa, podemos usar event.target y validar que el click no haya sido realizado sobre dicho elemento.

Ejemplo:

$(document).ready(function() {
    let $menu = $('nav');

  $('.hamburgesa').on('click', function(evt) {
    $menu.toggleClass('apareceMenu');
  });
  
  // Si se hace click sobre el documento
  $(document).on('click', function(evt) {
    $target = $(event.target);
    
    // Si el elemento que inicio el click no fue el botón 
    // y nav tiene la clase `apareceMenu`
    if (!$target.hasClass('hamburgesa') && $menu.hasClass('apareceMenu')) {
      // Removemos la clase
      $menu.removeClass('apareceMenu');
    }
  });
});
.hamburgesa {
  position: fixed;
  top: -6px;
  right: 10px;
  cursor: pointer;
  color: black;
  font-size: 3em;
  text-shadow: 0 0 10px white;
  z-index: 9999;
}

nav {
  width: 250px;
  height: 100vh;
  border-right: 1px solid #999;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

nav.apareceMenu {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

nav ul {
  float: none;
}

nav li {
  display: block;
  text-align: left;
}

nav a {
  line-height: 14vh;
  font-size: 11px;
  font-weight: 600;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>responsive menu</title>
</head>

<body>
  <span class="hamburgesa">&equiv;</span>
  <nav>
    <ul>
      <li><a href="#hero" class="menu" data-id="#hero">Inicio</a></li>
      <li><a href="#nosotros" class="menu" data-id="#nosotros">Nosotros</a></li>
      <li><a href="#productos" class="menu" data-id="#productos">Productos</a></li>
      <li><a href="#calidad" class="menu" data-id="#calidad">Calidad</a></li>
      <li><a href="#logistica" class="menu" data-id="#logistica">Logística</a></li>
      <li><a href="#environment" class="menu" data-id="#environment">Medio ambiente</a></li>
      <li><a href="#contacto" class="menu" data-id="#contacto">Contacto</a></li>
    </ul>
  </nav>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

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.