Hide the side menu bar using Jquery

Question

I am trying to hide the side left menu bar on click of button as well as on click of any where in the document.

I tried the following code which is in the below link.

I need some help.....

Here is the tried code: Jquery:

$("#openMenuLayout").click(function(e){
   debugger;
    if ($('#menuLayout').hasClass('open-menu')){
       $('#menuLayout').removeClass('open-menu');
       $('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
          $(this).css('display','block');
     } else {
       $('#menuLayout').addClass('open-menu');
       $('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
       $(this).css('display','block');
     }

     e.preventDefault();
 });

Demo Link

"as well as on click of any where in the document." do you mean anywhere except the sidebar? — Sionnach733, Feb 12 '14 at 15:09

score 2 · Answer 1 · edited May 23 '17 at 12:33

Very similar to this question: Opening mobile menu in Chrome for Android by setting width only works first time.

That's my solution: http://codepen.io/anon/pen/jiyHI

Basically you create a layer between your menu and the content, which is clickable.

EDIT: The code

<div id="overlay"></div>
<div id="menu-button"></div>
<div id="menu">
     <!--your menu-->    
</div>
<div id="content"></div>

CSS

#content {
  ...
  z-index:1;
}

#overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.3);
  z-index:5;  //between content and overlay
  display: none;
}

#menu{
     z-index:10; //greater than content and overlay
 }

Javascript

$("#menu-button").bind( "click", function() {
  $('#menu').toggleClass('open');
  $('#overlay').show(0);
});

$("#overlay").bind( "click", function() {
  $('#mobile-menu').removeClass('open');
  $('#overlay').hide(0);     
});

link-only answers are discouraged.. also with similar or duplicate questions you should flag. Try to sum up the main points of the link you provided. — Vogel612, Feb 12 '14 at 15:14

display-name-is-missing · Accepted Answer · 2014-02-12T15:23:30.660

1

This function will close the menu when the user clicks outside of the menu.

$(document).click(function(e){

    if (!$("#menuLayout").is(e.target) && $("#menuLayout").has(e.target).length === 0) { 

           // Clicked outside, close menu
            $("#menuLayout").removeClass('open-menu');

    }

});

edited Feb 12 '14 at 15:23

answered Feb 12 '14 at 15:07

display-name-is-missing

4,424
5
28
41

@itay no specific reason. Would it be better with `click`? – display-name-is-missing Feb 12 '14 at 15:08

score 0 · Answer 3 · answered Feb 12 '14 at 15:19

0

To close the side bar when you click anywhere in the the document you need to put the logic in the below function.

$(document).mouseup(function (e) { });

answered Feb 12 '14 at 15:19

ConfusedCoder

103
1
9

score 0 · Answer 4 · answered Feb 12 '14 at 15:38

This allows you toggle visibility with image also!

$("#openMenuLayout").click(function(e){
        if ($('#menuLayout').hasClass('open-menu')){
            $('#menuLayout').removeClass('open-menu');
            $('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
            $(this).css('display','block');
        } else {
            $('#menuLayout').addClass('open-menu');
            $('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
            $(this).css('display','block');
        }  
        e.preventDefault();
 });


$(document).mouseup(function (e)
{
    var container = $("nav#menuLayoutList");
    console.log(e.target.nodeName);
    if (!container.is(e.target) 
        && container.has(e.target).length === 0 
        && e.target.nodeName != "IMG")
    {
        $('#menuLayout').removeClass('open-menu');
    } 
});

http://jsfiddle.net/WDqZ2/8/

or you can add e.target.id != 'something' instead of e.target.nodeName != "IMG" . This would be better approach. — Vygandas, Feb 12 '14 at 15:41

Hide the side menu bar using Jquery

4 Answers4