Clicking out of an element fades out div

Question

I have a "mobile" menu which goes on the desktop version too see here:
http://bit.ly/1JTBuWy

Clicking on the "hamburger" menu triggers the opacity of the overall wrap div. you can see the effect in the link. what I am trying to add is simply another trigger which will close the menu when it's open not only by clicking the hamburger menu again but also on the whole left are of the screen

Something like that: http://bit.ly/1B7LqHb

This is partial of the code I'm triggering on click:

jQuery("#page-cover").css("opacity",0.6).fadeIn(300);

And this fades it back out:

jQuery("#page-cover").css("opacity",0.6).fadeOut(300);

Thanks

Thanks

Answer 1

you may define an invisible div that sits on the left of the screen which detects mouse onclick event through the jQuery

css

.invisibleLeft {
    position:absolute;
    top:0;
    left:0;
    width:10%;   
}

html

<div class="invisibleLeft"></div>

javascript

$(".invisibleLeft").on("click", function(){
    $("#page-cover").css("opacity",0.6).fadeIn(300);
});