Pop out navigation menu to close when click any blank part of page

Question

My current project has a Navigation menu that has a floating toggle on the top left, and when toggled the menu pops out on the left hand side of the page. The menu auto closes when a link is clicked, if the #menutoggle is clicked again, or there is a menuclose button [x] at the top right of the menu. I would like to add the ability to close the menu by simply clicking anywhere outside the menu - or any blank part of the page. I'm sure this is a simple addition to the current script - and I've tried a few things but without success. Any help with coming up with the right code would be appreciated!

//JAVASCRIPT
// Menu settings

;(function(){
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
$('.smoothScroll').on('click',function(){
$('#menuToggle').removeClass('active');
$('body').removeClass('body-push-toleft');
$('#theMenu').removeClass('menu-open');
});


})(jQuery)

//CSS
/* ==========================================================================
   MENU CONFIGURATION
   ========================================================================== */

.menu {
 position: fixed;
 right: -200px;
 width: 260px;
 height: 100%;
 top: 0;
 z-index: 10;
 text-align: left;
}

.menu.menu-open {
 right: 0px;
}

.menu-wrap {
 position: absolute;
 top: 0;
 left: 60px;
 background: #1a1a1a;
 opacity: 0.9;
 width: 200px;
 height: 100%;
}

.menu h1.logo a {
 font-family: "Oswald", sans-serif;
 font-size: 16px;
 font-weight: 700;
 letter-spacing: 0.15em;
 line-height: 40px;
 text-transform: uppercase;
 color: #ffffff;
 margin-top: 20px;
}

.menu h1.logo a:hover {
 color: #ffffff;
}

.menu img.logo {
 margin: 20px 0;
 max-width: 160px;
}

.menu a {
 margin-left: 20px;
 color: #808080;
 display: block;
 font-size: 12px;
 font-weight: 700;
 line-height: 40px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}

.menu a:hover {
 color: #ffffff;
}

.menu a:active {
 color: #ffffff;
}

.menu a > i {
 float: left;
 display: inline-block;
 vertical-align: middle; 
 text-align: left;
 width: 28px;
 font-size: 30px;
 line-height: 40px;
 margin: 25px 2px;
}

.menu-close {
 cursor: pointer;
 display: block;
 position: absolute;
 font-size: 14px;
 color: #808080;
 width: 40px;
 height: 40px;
 line-height: 40px;
 top: 20px;
 right: 5px;
 -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
}

.menu-close:hover {
 color: #ffffff;
 -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
 overflow-x: hidden;
 position: relative;
 left: 0;
}

.body-push-toright {
 left: 200px;
}

.body-push-toleft {
 left: -200px;
}

.menu,
.body-push {
 -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
}

#menuToggle {
 position: absolute;
 top: 20px;
 left: 0;
 z-index: 11;
 display: block;
 text-align: center;
 font-size: 14px;
 color: #ffffff;
 width: 40px;
 height: 40px;
 line-height: 40px;
 cursor: pointer;
 background: rgba(0,0,0,0.25);
 -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
}

#menuToggle:hover {
 color: #ffffff;
 background: rgba(0,0,0,0.2);
 -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;
}

//HTML
<!-- Menu -->
 <nav class="menu" id="theMenu">
  <div class="menu-wrap">
   <h1 class="logo"><a href="index.html#home">NAVIGATE</a></h1>
   <i class="fa fa-times menu-close"></i>
   <a href="#home" class="smoothScroll">Home</a>
   <a href="#about" class="smoothScroll">About</a>
            <a href="#testimonials" class="smoothScroll">Testimonials</a>
   <a href="#portfolio" class="smoothScroll">VIDEO SAMPLES</a>
   <a href="#services" class="smoothScroll">AUDIO SAMPLES</a>
            <a href="#bio" class="smoothScroll">WORK HISTORY </BR>SONG LIST</a>
   <a href="#contact" class="smoothScroll">Contact</a>
   <a href="tel:PHONE REMOVED"><i class="fa fa-phone-square"></i></a>
   <a href="SITE REMOVED" target="_blank"><i class="fa fa-facebook-square"></i></a>
            <a href="mailto:EMAIL REMOVED"><i class="fa fa-envelope"></i></a>
            
            
      
  </div>
  
  <!-- Menu button -->
  <div id="menuToggle"><i class="fa fa-bars"></i></div>
 </nav>

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

There's a popular answer on this question here: How do I detect a click outside an element?

But it's important to look at the comments and the follow up article which suggest a much better option https://css-tricks.com/dangers-stopping-event-propagation/

$(document).on('click', function(event) {
    if (!$(event.target).closest('#theMenu').length) {
      $('#theMenu').removeClass('menu-open');
    }
});

edited May 23 '17 at 12:06

Community

1
1

answered Aug 17 '15 at 01:48

Anton

113
1
7

Thanks #Anton! Your suggestion works great on desktop. Any idea why it doesn't work on iOS? – Paul O'Shea Aug 17 '15 at 02:26
Read elsewhere I may need to add `.css('cursor','pointer');` somewhere. But not sure where this should go in your solution. – Paul O'Shea Aug 17 '15 at 02:44
click events will trigger on mobile, so I'm not sure why it isn't working. `.css('cursor','pointer');` is purely visual. You can read about that here: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor – Anton Aug 17 '15 at 03:17
1

Thanks #Anton. Not sure why, but required the .css to work on iOS. There are quite a few posts on here about it. [link](http://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios) [link](http://stackoverflow.com/questions/25333738/click-events-not-firing-on-ios) I can confirm that this amendment to you solution now works on both desktop and ios. `})(jQuery) $('#theMenu').css('cursor','pointer'); $(document).on('click', function(event) { if (!$(event.target).closest('#theMenu').length) { $('#theMenu').removeClass('menu-open'); } });` Thanks for your help! – Paul O'Shea Aug 17 '15 at 03:43

Pop out navigation menu to close when click any blank part of page

1 Answers1

Linked