close menu onbody click and animate body

Question

I've asked this before but all answers don't work so I have a sample page, webpage . I have a menu that re-sizes, I want to close the menu when one clicks outside the menu as well as for the body to animate downward when the dropdown is first toggled so that the drop down menu doesn't hide any content.

 jQuery(document).ready(function($) { //open-close submenu on mobile $('.cd-main-nav').on('click', function(event) { $(this).children('ul').toggleClass('is-visible0'); }); }); 

 /*when the drop down is toggled*/ .cd-main-nav ul.is-visible0 { -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); -o-transform: translateY(70px); transform: translateY(70px); } 

 <nav class="cd-main-nav"> <ul> <li><a href="../index.html">Home</a></li> <li class="current2"><a href="mon.html">Mon</a></li> <li><a href="tue.html">Tue</a></li> <li><a href="wed.html">Wed</a></li> </ul> </nav> 

Answer 1

Just attach a click event to the body and a separate click event to the window that deny the first click event.

$('html').click(function() {
//Hide the menu
});

$('.slideout-menu').click(function(event){
    event.stopPropagation();
});

Warning, if using this technique, be aware of the dangers of stopping propagation .

Answer 2

found the code.

 jQuery(document).ready(function($) { //open-close submenu on mobile $('.cd-main-nav').on('click', function(event) { $(this).children('ul').toggleClass('is-visible0'); }); }); window.addEventListener('mouseup', function(event) { var box = document.getElementById('menu-c'); if (event.target != box && event.target.parentNode != box) { $('.cd-main-nav').children('ul').removeClass('is-visible0'); } }); //id="menu-c" on cd-main-nav