如何通过单击菜单外部来关闭移动菜单

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>

---