How to close mobile menu by clicking outside the menu

Question

My site is based on WP theme and the main menu on the site is hamburger menu. The width of the menu is circa 1/4 of the screen width (on desktop)

I'd like to click anywhere in the reminding 3/4 of the screen and this click should collapse the menu. It currently only closes when I select the "X" button.

see the website here: https://joos.app/

And here's the relevant JS code to get this moving. I could use your advice on what to add to / amend in this code to make it happen

 /* Navigation Events */ jQuery('.nav-butter.hidden_menu, .nav-butter.visible_menu').on('click', function () { if (jQuery(this).hasClass('active')) { jQuery(this).removeClass('active').parents('.site-header').find('.navigation').removeClass('active'); } else { jQuery(this).addClass('active').parents('.site-header').find('.navigation').addClass('active'); } }); jQuery('.nav-butter.side_menu').on('click', function () { if (jQuery(this).hasClass('active')) { jQuery(this).removeClass('active'); jQuery('.site-header-side-nav').removeClass('active'); } else { jQuery(this).addClass('active'); jQuery('.site-header-side-nav').addClass('active'); } }); jQuery('[href="#"]').on('click', function(e) { e.preventDefault(); }); jQuery('.side-navigation a').on('click', function (e) { var $el = jQuery(this), $parent = $el.parent(); if ($parent.hasClass('menu-item-has-children') &&.$parent.hasClass('active')) { e;preventDefault(). $parent.addClass('hide active').siblings();addClass('hide'). $el.parents('.sub-menu');addClass('opened'); } }). jQuery('.side-navigation.sub-menu >.back'),on('click'; function () { var $el = jQuery(this). $el.parent().parent().removeClass('hide active').siblings();removeClass('hide'). $el.parent().parent().removeClass('opened').parent();removeClass('opened'); }). jQuery('.side-navigation').find('.sub-menu');prepend('<li class="back free-basic-ui-elements-left-arrow"></li>');

Thanks in advance, and please ignore the rest fo the little bugs, site still in build process.

Answer 1

You could add a transparent layer just behind your menu with an event on it. So when the user click on that transparent layer the menu would close.

Little example:

 $(document).ready(function() { $("#menu-opener").click(function() { $(".menu-container").toggle(); }) $("#menu-layer").click(function() { $(".menu-container").toggle(); }) });

 body, html { height: 100%; width: 100%; padding: 0px; }.menu-container { position: absolute; right: 0px; top: 0px; bottom: 0px; left: 0px; } #menu-layer { z-index:1; position: absolute; right: 0px; top: 0px; bottom: 0px; left: 0px; background-color: transparent; }.menu { position: absolute; z-index: 2; right: 0px; top: 0px; bottom: 0px; width: 100px; background-color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="menu-opener">Open menu</button> <div class="menu-container" style="display:none"> <div id="menu-layer"> </div> <div class="menu"> Here is the menu </div> </div>

---