CODEWITHSUNDEEP
javascriptjquery
userden
userden

Reputation: 1683

Hide menu, when clicking anywhere else than the menu

I have a menu that appears when I click an icon. Currently I can close it by clicking the 'close' icon, but I would like to be able to close it by clicking anywhere outside of the menu, when the menu is visible.

Here is a jsFiddle: http://jsfiddle.net/budapesti/3v5ym2bp/3/

For example the following doesn't work:

$(document).click(function() { 
        if($('.menu').is(":visible")) {
            $('.menu').hide()
        }      
});

I found similar questions, such as jQuery: Hide element on click anywhere else apart of the element and How do I detect a click outside an element?, but couldn't get the solutions to work for me.

EDIT: I wonder if is(":visible") works with jQuery "animate"?

Upvotes: 8

Views: 3347

Answers (5)

Farhad Manafi
Farhad Manafi

Reputation: 334

var main = function() {
  $('.icon-menu').click(function() {
    $('.icon-menu').hide();
    $('.menu').animate({
      left: "0px"}, 200);
     
  });


  $('.closed').click(function() {
    $('.menu').animate({
      left: "-285px"}, 200);
    $('.icon-menu').show();
  });
};

$(document).ready(main);


var rahul=0;
$(window).click(function(e) {
    
 $('.menu').animate({
      left: "-285px"}, 200);
    $('.icon-menu').show();
        
   
 });
.menu {
	position: fixed;
	width: 285px;
	height: 100%;
	left: -285px;
	background: #808080;
	z-index: 1;
}

.glyphicon-remove, ul {
    color: #fff;
    padding: 10px;
}
<div class="menu" onclick="event.cancelBubble=true;">
  <span class="glyphicon glyphicon-remove closed pull-right"></span>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
</div>

<div class="icon-menu" onclick="event.cancelBubble=true;">
    <span class="glyphicon glyphicon-menu-hamburger"></span>*MENUS*
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Use css attribute left to detect if the menu is visible instead of :visibe because it's bot work with chrome, see jquery .is(“:visible”) not working in Chrome.

You have just to detect if the menu is visible (use the css attribute left) because if the menu css left=0px that mean it's visible, and after that if the click is outside of menu or not and so if outside close it.

Take a look at Your updating fiddle work fine just by adding the following handle that detect outside click :

JS :

$(document).click(function(e) {
    //if the menu is visible
    if($(".menu").css('left') =="0px"){
        //if the click is outside of menu
        if($(e.target).closest('.menu').length == 0){
            $('.closed').click();
        } 
    }       
});

Upvotes: 1

rahul chaurasia
rahul chaurasia

Reputation: 153

call close function on anywhere click on window. And use event bubbling. i had update it its jsfiddle link is

> http://jsfiddle.net/rahulrchaurasia/3v5ym2bp/19/

Upvotes: 3

GL.awog
GL.awog

Reputation: 1322

I suggest you bind an event on document click after menu has been shown, the event that will ensure that every click anywhere outside menu will close it. 

$(document).on("click.menu",function(event) {
            var target = $(event.target);   
            if (!target.closest(".menu").length || target.closest(".closed").length) {
                closeMenu(function() {
                    $(document).off("click.menu");
                });
            }           
        });

here you'll have to evaluate event object, and what trigger it - which element if it's inside menu (apart from the close button) then don't do nuffing, if outside - then close the menu. All the closing stuff is put to the separate function. also don't forget to unbind this handler from document after closing

http://jsfiddle.net/3v5ym2bp/15/

working demo

Upvotes: 2

wishab
wishab

Reputation: 1034

Try this : http://jsfiddle.net/3v5ym2bp/13/

html

<div class="inv"></div><!-- Added an invisible block -->
<div class="menu"> <span class="glyphicon glyphicon-remove closed pull-right"></span>

    <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
    </ul>
</div>
<div class="icon-menu"> <span class="glyphicon glyphicon-menu-hamburger"></span>MENU</div>

css

.menu {
    position: fixed;
    width: 285px;
    height: 100%;
    left: -285px;
    background: #202024;
    z-index: 1;
}
.glyphicon-remove, ul {
    color: #fff;
    padding: 10px;
}
/* Added an invisible block */
.inv {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    margin:0;
}

jQuery

"use strict";

var main = function () {
    $('.icon-menu').click(function () {
        $('.icon-menu').hide();
        $('.inv').show(); //added
        $('.menu').animate({
            left: "0px"
        }, 200);
    });
    //Added
    $('.inv').click(function () {
        $('.inv').hide();
        $('.menu').animate({
            left: "-285px"
        }, 200);
        $('.icon-menu').show();

    });


    $('.closed').click(function () {
        $('.inv').hide();//added
        $('.menu').animate({
            left: "-285px"
        }, 200);
        $('.icon-menu').show();

    });
};

$(document).ready(main);

Another simple example : http://jsfiddle.net/3v5ym2bp/17/

Upvotes: 2

Related Questions