cerrar el menú en el cuerpo y animar el cuerpo

He preguntado esto antes, pero todas las respuestas no funcionan, así que tengo una página de muestra, una página web . Tengo un menú que cambia de tamaño. Quiero cerrar el menú cuando se hace clic fuera del menú, así como para que el cuerpo se anime cuando se despliega el menú desplegable para que el menú desplegable no oculte ningún contenido.

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); } 
  

Simplemente adjunte un evento de clic al cuerpo y un evento de clic separado a la ventana que niega el primer evento de clic.

 $('html').click(function() { //Hide the menu }); $('.slideout-menu').click(function(event){ event.stopPropagation(); }); 

Advertencia, si utiliza esta técnica, tenga en cuenta los peligros de detener la propagación .

Encontró el código.

 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