Close Menu-Off-cuts when clicking away

Navigation
2

How can I do it, so when I click on the white area after the menu is open, can I close it? The same way it runs when I click the "x"? 

$(function() {
  $('.toggle-nav').click(function() {
    toggleNav();
  });
});

function toggleNav() {
  if ($('#wrapper').hasClass('show-nav')) {
    // Do things on Nav Close
    $('#wrapper').removeClass('show-nav');
  } else {
    // Do things on Nav Open
    $('#wrapper').addClass('show-nav');
  }
}
* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Configuração geral */

#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1000px;
  /* Temp: Simulates a tall page. */
}
/* Escorpo da página */

#main {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 3% 6%;
}
.show-nav #main {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
#nav {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  background: #428bca;
  padding: 25px;
  color: #fff;
}
#nav ul > li > a {
  padding: 10px;
}
.btn-nav {
  display: block;
  cursor: pointer;
  width: 7em;
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: 300;
  color: #003DFF;
  border: 2px solid #003DFF;
  border-radius: 4px;
  padding: 10px;
  text-align: -webkit-center;
  text-decoration: none;
  outline: none;
  background: #fff;
  transition: all 0.3s ease-in-out;
  /* Transição de hover */
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.btn-nav:hover {
  color: #FFFFFF;
  background: #003dff;
}
.btn-nav:active,
.btn-nav:focus {
  background: #00619D;
  border: 2px solid #00619D;
  color: #fff;
}
.btn-close {
  color: rgb(255, 255, 255);
  font-size: 25px;
  border: 2px solid #FFFFFF;
  padding: 1px 11px 4px 10px;
  width: 38px;
  margin-bottom: 20px;
  display: block;
  border-radius: 50px;
  text-decoration: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Menu Off-Canvas</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script></head><body><articleid="wrapper">
    <section id="main">

      <nav id="nav">
        <a href="#" class="toggle-nav btn-close">x</a>
        <h2>Menu Principal</h2> 
        <p>Você pode inserir uma lista de links nesta área.</p>
      </nav>

      <section id="content">
        <a href="#" class="toggle-nav btn-nav">Menu »</a>
        <p>Todo o conteúdo permanece nesta área.</p>
      </section>

    </section>
  </article>

</body>

</html>

JSFiddle: link

    
asked by anonymous 16.07.2015 / 18:39

1 answer

2

Here's a suggestion: 

$(function () {
    $('.toggle-nav').click(function (e) {
        e.stopPropagation();
        toggleNav();
    });
    $('#main').click(function (e) {
        var target = $(e.target);
        if (!target.closest('#nav').length && $('#wrapper').hasClass('show-nav')) toggleNav();
    });
});

Looking at your HTML I see this structure: 

#wrapper
 |- #main
     |-#nav // parte azul
     |-#content
         |-a.toggle-nav

Since you want to know when #main was clicked but:

  • not in the blue part
  • just close, not open

You can join e.stopPropagation(); to the first event sink. So the other event listener will only receive the clicks off of that button. Joining the% check% we guarantee that we are not in the blue part, and with target.closest('#nav').length we make it only run the function if the menu is open.

jsFiddle: link

    
16.07.2015 / 19:27
Edit an element within an object, within an array, with Mongoose Layout for all screen sizes [duplicate]