Close Sidemenu by Clicking in Body

Question

I would like the menu to act like the sidemenu on Medium, when the sidemenu is open and the user clicks outside #sidebar-wrapper, the sidemenu closes. Right now I have to click the toggle X to close the menu.

html

<a id="menu-toggle" href="#" class="toggle more navbar-brand">logo</a>
<div id="sidebar-wrapper">
      <a id="menu-close" href="#" class="toggle">X</a>
</div

some css

#sidebar-wrapper {
    margin-left: -230px;
    left: 0;
    top: -20px;
    width: 230px;
    background: #f7f7f7;
    position: fixed;
    height: 120%;
    overflow-y: auto;
    z-index: 1000;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

#sidebar-wrapper.active {
    left: 230px;
    width: 230px;
    border-right: 1px solid #ccc;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

js

<script> 
   // menu close function
   $("#menu-close").click(function(e) {
       e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
   });
</script>

<script>  
   // menu open function
   $("#menu-toggle").click(function(e) {
       e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
   });
</script>

quick and dirty way is to add a function to body.click to try to close the menu — Lee Gary, Apr 11 '14 at 03:41

score 2 · Accepted Answer · answered Apr 11 '14 at 05:07

Try this

$("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

DEMO

Sudharsan S · Answer 2 · 2014-04-11T03:57:39.647

1

use stopPropagation it prevent from event bubbling

$("#menu-close").click(function(e) {
       e.stopPropagation();
       $("#sidebar-wrapper").toggleClass("active");
 });

  $(document).click(function(e) {
           $("#sidebar-wrapper").toggleClass("active");
  });

edited Apr 11 '14 at 03:57

answered Apr 11 '14 at 03:45

Sudharsan S

15,336
3
31
49

actually.. this makes the sidemenu appear and disappear everytime the body is clicked. here is the fiddle: http://jsfiddle.net/Vn84z/1/ – evan Apr 11 '14 at 04:11

Close Sidemenu by Clicking in Body

2 Answers2

DEMO