Hide menu when clicking outside of it

Question

I'd like to hide my menu when I click outside of it. I've tried many things but I must do something wrong and I've too little knowledge in Javascript to handle this.

Here is the Html

<header id="header">
            <div id="showLeftPush">
                <div class="toggle">
                  <div class="one"></div>
                  <div class="two"></div>
                  <div class="three"></div>
                </div>
            </div>
            <img src="img/LOGO_HCS.svg" alt="Logo Here Comes the Sun">
        </header>
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"     id="cbp-spmenu-s1">
            <img class="scrollTo" href="#header"  src="img/LOGO_HCS_WHITE.svg" alt="logo here comes the sun">
            <a class="scrollTo" href="#apropos">ABOUT</a>
            <a class="scrollTo" href="#finishing">FINISHES</a>
            <a class="scrollTo" href="#news">NEWS</a>
            <a class="scrollTo" href="#contact">CONTACT</a>
            <div class="trait"></div>
            <a class="secondBloc" href="http://www.lampegras.fr/"><b>LAMPE GRAS</b></a>
            <a class="secondBloc" href="http://www.schottlander.fr/"><b>LAMPE MANTIS</b></a>
            <a class="secondBloc" href="http://www.inthetube.fr/"><b>LAMPE IN THE TUBE</b></a>
            <a class="secondBloc" href="http://www.surpil.fr/"><b>CHAISE SURPIL</b></a><br/>
            <a class="secondBloc" href="http://www.dcwe.fr/"><b>by<br/>DCW éditions</b></a>
            <div class="trait"></div>
            <a class="secondBloc" href="https://www.facebook.com/lampegras"><b>Facebook</b></a>
            <a class="secondBloc" href="https://fr.pinterest.com/collectivea/dcw-editions/"><b>Pinterest</b></a><br><br>
            <a class="langue" id="en" href="index.html">En</a>
            <a class="langue" href="index_fr.html">Fr</a>
        </nav>

Here is the script

 <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            body = document.body;
         showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        function disableOther( button ) {

            if( button !== 'showLeftPush' ) {
                classie.toggle( showLeftPush, 'disabled' );
            }   
        }
    </script>

Thank you so much for your help !

Answer 1

How about something like this?

$(document).mouseup(function (e){
    var container = $("#your-menu-div"); //Your menu div
    var container1 = $("#your-menu-icon"); //Your menu icon

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0 // ... nor a descendant of the container
        &&!container1.is(e.target) // if the target of the click isn't the container...
        && container1.has(e.target).length === 0 // ... nor a descendant of the container
    ){
        container.hide();
    }
});

Answer 2

why not using css? by google dropdown css you will find many samples to hide and show per css. you dont hvae to use dropdown but in that tuts you will find somethink to deal with. you can use mouse hover or other nice functions