CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ty Yt
Ty Yt

Reputation: 466

hide sidebar when click anywhere in page

I have an animate sidebar which appears when user clicks on a hamburger button. Here is the structure :

$('#nav-toggle').click(function() {
  if($('#nav-toggle').hasClass('active')){
    $('.menu').animate({
      right: "0px"
    }, 200);
  }else{
    $('.menu').animate({
      right: "-285px"
    }, 200);
  }

});
.menu{
    right:-285px;
    height:100%;
    position: fixed;
    width: 285px;
    z-index: 1;
    background-color: #111111;
}
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu li a{
    color:white;
}
    <div class="menu">
      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

Actually we can open menu by clicking on #nav-toggle element and close it by clicking on this element too. I'd like to allow user to close this menu by clicking anywhere in the page. How can I do do that? I tried with e.preventDefault(); in my if statement but it doesn't work.

Thanks!

Upvotes: 5

Views: 17538

Answers (6)

Arion Kryeziu
Arion Kryeziu

Reputation: 11

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})
.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Upvotes: 0

Alberto Cantu
Alberto Cantu

Reputation: 71

Complementing the Gintoki's answer

$('#nav-toggle').on('click', function(e) {

  e.stopPropagation();

  $(".menu").toggleClass('bar');

  $('body').one('click', function(e) {

   if ($('.menu').hasClass('bar')) {
     $(".menu").toggleClass('bar')
   }

  });

});

This will just remove the listener from body, so well, it's not executing every time.

I'm actually not sure what is better for performance, but I don't like the fact that every click on the website is going through that "if(hasClass)"

Upvotes: 0

Med Lagg
Med Lagg

Reputation: 27

i've slightly edited your code :

here it is :

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);});
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);});

https://jsfiddle.net/ndxqdqwc/

Upvotes: 0

elreeda
elreeda

Reputation: 4597

I suggest to use toggleClass method and animate it by adding transition: .2s to your .menu, working example:

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})
.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Upvotes: 9

satwik
satwik

Reputation: 607

Try this, it will always hide of user clicks on body

$(document).on('click',function(){
     if($("#nav-toggle").hasClass("active")){
          $('.menu').animate({ right: "-100%" }, 200);
      }
});

Upvotes: 1

pradeep1991singh
pradeep1991singh

Reputation: 8365

You can add a parent section to your page and attach a click event same as you have done with #nav-toggle, something like this

$('.parent-section').click(function() {
 if($('#nav-toggle').hasClass('active')){
  $('.menu').animate({
   right: "0px"
  }, 200);
 } else {
  $('.menu').animate({
   right: "-285px"
  }, 200);
 }

});

Or you can add this to body tag directly, If you are going to use this i suggest go with section not body, hope this will help you :)

Upvotes: 0

Related Questions