Click outside menu to close jquery

Question

I've been working a responsive web site and on tablet become dropdown menu but I need that when a click is made outside of the document the menu closes, (also I need that the mouse arrow changes to it's normal form) I can't find a way to do this, here is the code I have been using:

JQUERY

  $(function() {

    var btn_mobile = $('#nav-mobile'),
        menu = $('#menu').find('ul');

    btn_mobile.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();


        var el = $(this);

        el.toggleClass('nav-active');
        menu.toggleClass('open-menu');

    })

});

HTML

<nav id="menu"><a class="nav-mobile" id="nav-mobile" href="#">MENU</a>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

PARTIAL CSS (tablet)

#nav-mobile{
    display: none;
    background: url(../images/menu-icons.svg) no-repeat 42px -2px;
    float: right;
    width:75px;
    height:35px;
    padding-top:9px;
    position: absolute;
    right:0;
    top:0;
    font-weight:bold;

}

#nav-mobile.nav-active{opacity: 1; background: url(../images/menu-icons.svg) no-repeat 42px -48px;}

/* TABLET */
    #nav-mobile{display: block; }
    #menu{margin-top:0px;width: 100%;float: none;padding-top:55px;}
    #menu ul{
    max-height: 0;
    overflow: hidden;
    text-align:center;
    position:relative;
    z-index:500;
    transition: max-height .5s, box-shadow 1.2s, opacity 0.5s;
    opacity:0;
    margin:0 -3.2%;
    }
    #menu li{background:#fff;border-bottom: 1px solid #ececec;float: none;}
    #menu li a{padding: 12px 0;height: auto;width:100%; text-transform:uppercase;}
    #menu li a:hover{background:#fbfbfb;}
    #menu ul.open-menu{max-height: 400px;transition: max-height .5s, box-shadow 1.2s, opacity 0.5s; border-top: 1px solid  #CCC; box-shadow: 0px 9000px 0px 9000px rgba(0,0,0,0.15); opacity:1; }

thank you for your attention!!!.

You can create invisible div that fills whole document when menu is opened. make sure the div's z-index is smaller than menu z-index. And add click handler to that div. And if someone clicks that, just close the menu. — Hardy, Jun 05 '14 at 00:26
Possible duplicate of [How do I detect a click outside an element?](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Dan Philip Bejoy, Apr 14 '17 at 12:01

score 0 · Answer 1 · answered Jun 05 '14 at 00:34

Look at hover(in,out) in jquery for mouse cursor changes and use the body :not['#nav..'] selector to close the menu.

Hover example:

// Hover script
btn_mobile.hover(
    function () { 
        // {Hover in of the menu} 
        // change the mouse here
    }, 
    function () { // out
        // {Hover out of the menu} 
        // change the mouse here

    }
);

score 0 · Accepted Answer · answered Jun 05 '14 at 00:37

You could use a transparent layer behind your menu that would cover the whole page (manipuling the css z-index)

On this layer you would add a click event handler that would hide the menu and change the arrow and "display:none;" itself. the menu dropdown would have to "display:block" it back when selected

have a look at how bootstrap handles it with its modals : http://getbootstrap.com/javascript/#modals

Click outside menu to close jquery

2 Answers2