点击页面的任何空白部分弹出导航菜单关闭 [英] Pop out navigation menu to close when click any blank part of page
本文介绍了点击页面的任何空白部分弹出导航菜单关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我当前的项目有一个导航菜单，左上角有一个浮动切换，当切换菜单时，会在页面的左侧弹出。单击链接时，如果再次单击#menutoggle，或者菜单右上角有一个菜单关闭按钮[x]，菜单会自动关闭。我想添加关闭菜单的功能，只需点击菜单外的任何地方 - 或页面的任何空白部分。我确信这是对当前脚本的一个简单补充 - 我尝试了一些东西，但没有成功。任何帮助提出正确的代码将不胜感激！
// JAVASCRIPT //菜单设置;（function（）{$（' （'click'，function（）{$（'＃menuToggle'）。toggleClass（'active'）; $（'body'）。toggleClass（'body-push-toleft '）; $（' ＃theMenu '）toggleClass（' 菜单打开。 '）;}）; $（' smoothScroll '）上（' 点击，函数（）{$（ '＃menuToggle'）removeClass （ '有效'）; $（ '主体'）removeClass（ '体推toleft'）; $（ '＃theMenu'）removeClass（ '菜单开'）;}）;}）（jQuery的）
// CSS / * ======== ================================================== ================ MENU配置================================ ========================================== * /。menu {position：fixed ; right：-200px;宽度：260px;身高：100％; top：0; z-index：10; text-align：left;}。menu.menu-open {right：0px;}。menu-wrap {position：absolute; top：0;左：60px;背景：＃1a1a1a;不透明度：0.9;宽度：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;文字转换：大写;颜色：#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;颜色：＃808080;显示：块; 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>我{float：left;显示：inline-block; vertical-align：middle; text-align：left;宽度：28px; font-size：30px; line-height：40px; margin：25px 2px;}。menu-close {cursor：pointer;显示：块;位置：绝对; font-size：14px;颜色：＃808080;宽度：40px; height：40px; line-height：40px; top：20px;右：5px; -webkit-transition：全部.1s缓和; -moz-transition：全部.1s缓进; -ms-transition：全部.1s缓和; -o-transition：全部.1s缓和;过渡：所有.1s缓入;}。menu-close：hover {color：#ffffff; -webkit-transition：全部.1s缓和; -moz-transition：全部.1s缓进; -ms-transition：全部.1s缓和; -o-transition：全部.1s缓和; transition：all .1s ease-in-out;} / *单击菜单按钮后推动主体* /。body-push {overflow-x：hidden;位置：相对; body-push-toright {left：200px;}。body-push-toleft {left：-200px;}。menu，.body-push {-webkit-transition：all .3s ease; -moz-transition：全部.3s缓解; -ms-transition：所有.3s缓解; -o-transition：所有.3s缓解; transition：all .3s ease;}＃menuToggle {position：absolute; top：20px;左：0; z-index：11;显示：块; text-align：center; font-size：14px;颜色：#ffffff;宽度：40px; height：40px; line-height：40px;光标：指针;背景：rgba（0,0,0,0.25）; -webkit-transition：全部.1s缓和; -moz-transition：全部.1s缓进; -ms-transition：全部.1s缓和; -o-transition：全部.1s缓和;过渡：所有.1s缓入;}＃menuToggle：hover {color：#ffffff;背景：rgba（0,0,0,0.2）; -webkit-transition：全部.1s缓和; -moz-transition：全部.1s缓进; -ms-transition：全部.1s缓和; -o-transition：全部.1s缓和; transition：all .1s ease-in-out;} // HTML<！ - 菜单 - > < nav class =menuid =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 =＃homeclass =smoothScroll>主页< / a> < a href =＃aboutclass =smoothScroll>关于< / a> < a href =＃testimonialsclass =smoothScroll>褒奖< / a> < a href =＃portfolioclass =smoothScroll> VIDEO SAMPLES< / a> < a href =＃servicesclass =smoothScroll> AUDIO SAMPLES< / a> < a href =＃bioclass =smoothScroll> WORK HISTORY< / BR> SONG LIST< / a> < a href =＃contactclass =smoothScroll>联络人< / a> < a href =tel：PHONE REMOVED>< i class =fa fa-phone-square>< / i>< / a> < a href =SITE REMOVEDtarget =_ blank>< i class =fa fa-facebook-square>< / i>< / a> < a href =mailto：EMAIL REMOVED>< i class =fa fa-envelope>< / i>< / a> < / DIV> <！ - 菜单按钮 - > < div id =menuToggle>< i class =fa fa-bars>< / i>< / div> < / nav>
解决方案
<这里有一个流行的答案：
如何是否检测到元素之外的点击？
但是，查看注释和后续文章中提供了更好的选项
https://css-tricks.com/dangers-stopping-event-propagation/
$ p $
$（document）.on（'click'，function（event）{
if（ ！$（event.target）.closest（'＃theMenu'）。length）{
$（'＃theMenu'）。removeClass（'menu-open'）;
}
} ）;
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>
解决方案
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');
}
});
这篇关于点击页面的任何空白部分弹出导航菜单关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
