Menu responsive toggle?

Question

Menu responsive toggle?

Navigation

#1 by (0 votes)

0

Hello, I would like to know how to make this responsive menu that not only clicks on the hamburger to make toggle (which is already done) but click outside on any part of the document to removeClass, I tried to use $ ("* not: .hamburgesa "). removeClass inside the if when you already have that class, to remove it when I click anywhere except on the menu itself, but it does not work out. thanks

  $(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>

html css responsive

asked by francisco dwq 19.02.2018 в 19:07

source

1 answer

Save file in a folder with a java webservice? Change only text on a web page while maintaining header and footer

score 0 · Answer 1

Although it can be done according to the logic you propose, the resulting code is, to my liking, too tangled.

One option to carry out what you are looking for is:

Subscribe to the event click of document and if the nav has the class apareceMenu , remove it.
To prevent the menu from closing immediately after clicking on the classful element .hamburgesa , we can use event.target and validate that the click has not been made on this element.

Example:

$(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>