Close Menu-Offcanvas by clicking Outside

Asked

Viewed 481 times

2

How can I do, so when I click on the white area after the menu is open, I can close it? The same way it runs when I click on "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>

  <article id="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: https://jsfiddle.net/g2oohp11/

javascript jquery

  • Sergio, follow the link: https://jsfiddle.net/g2oohp11/

  • Yes, but I don’t want the blue area to run. That is: The user can only remove the navigation bar, either by clicking on the "x" or by clicking on the white area. In the blue area, I don’t want to...

  • That’s right, but note that now the white area is also opening the menu. You can only open the menu by clicking the button. =/

1 answer

2

Here is 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 the #main was clicked but:

  • not in the blue part
  • just close, don’t open

You can join e.stopPropagation(); on the first event receiver. So the other event receiver will only receive clicks off that button. Joining the check target.closest('#nav').length we guarantee that we are not in the blue part, and with $('#wrapper').hasClass('show-nav') You only run the function if the menu is open.

jsFiddle: https://jsfiddle.net/33oo065t/

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.