[英]Navigation Menu Doesn't Close
I came across a code of a navigation menu.我遇到了导航菜单的代码。 The problem with this navigation menu is that when I click on any of the menu-items, the menu successfully takes us to the desired link but does not close itself.
这个导航菜单的问题是,当我点击任何菜单项时,菜单成功地将我们带到所需的链接,但不会自行关闭。 This is an overlay navigation menu.
这是一个覆盖导航菜单。 For questions related to this post please comment.
与本帖相关的问题,请发表评论。 And THANKS IN ADVANCE!!
并提前致谢!!
$('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); });
.button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>
You don't have any code that tells the nav to hide.您没有任何代码告诉导航隐藏。 I added this to your js:
我将此添加到您的js中:
$('a').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
A better way to do this would be to add a class to all of the nav-based <a>
tags and select that class instead of the <a>
tag because you might have other <a>
tags in other sections of your project.一个更好的方法是添加一个 class 到所有基于导航的
<a>
标签和 select class 而不是<a>
标签的其他部分,因为您的项目的其他部分可能有<a>
标签。
So that might look like this:所以这可能看起来像这样:
$('a.myClass').click(function() {
$('#toggle').toggleClass('active');
$('#overlay5').toggleClass('open');
});
And then your html might look like this:然后您的 html 可能如下所示:
<li><a class="myClass smoothscroll1" href="#">Home</a></li>
<li><a class="myClass smoothscroll2" href="#about">About</a></li>
<li><a class="myClass smoothscroll3" href="#work">Work</a></li>
<li><a class="myClass smoothscroll4" href="#contact">Contact</a></li>
Here is a working snippet showing the simplified, <a>
tag selection version:这是一个工作片段,显示了简化的
<a>
标记选择版本:
$('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); }); $('a').click(function() { $('#toggle').toggleClass('active'); $('#overlay5').toggleClass('open'); });
.button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="smoothscroll1" href="#">Home</a></li> <li><a class="smoothscroll2" href="#about">About</a></li> <li><a class="smoothscroll3" href="#work">Work</a></li> <li><a class="smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>
And here is the more flexible, class-based version:这是更灵活、基于类的版本:
$('#toggle').click(function() { $(this).toggleClass('active'); $('#overlay5').toggleClass('open'); }); $('a.myClass').click(function() { $('#toggle').toggleClass('active'); $('#overlay5').toggleClass('open'); });
.button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }.button_container:hover { opacity: 0.7; }.button_container.active.top { transform: translateY(10px) translateX(0) rotate(45deg); background: #fff; }.button_container.active.middle { opacity: 0; background: #fff; }.button_container.active.bottom { transform: translateY(-10px) translateX(0) rotate(-45deg); background: #fff; }.button_container span { background: #0087cc; border: none; height: 5px; width: 100%; position: absolute; top: 0px; left: 0; transition: all 0.35s ease; cursor: pointer; }.button_container span:nth-of-type(2) { top: 10px; }.button_container span:nth-of-type(3) { top: 20px; }.overlay5 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity 0.35s, visibility 0.35s, width 0.35s; z-index: 50; }.overlay5:before { content: ''; background: black; left: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: left 0.35s ease; }.overlay5:after { content: ''; background: black; right: -55%; top: 0; width: 50%; height: 100%; position: absolute; transition: all 0.35s ease; }.overlay5.open { visibility: visible; height: 100%; }.overlay5.open:before { left: 0; }.overlay5.open:after { right: 0; }.overlay5.open li { animation: fadeInRight 0.5s ease forwards; animation-delay: 0.35s; }.overlay5.open li:nth-of-type(2) { animation-delay: 0.45s; }.overlay5.open li:nth-of-type(3) { animation-delay: 0.55s; }.overlay5.open li:nth-of-type(4) { animation-delay: 0.65s; }.overlay5 nav { position: relative; height: 70%; top: 50%; transform: translateY(-50%); font-size: 30px; font-family: 'Nova'; font-weight: 400; text-align: center; z-index: 100; }.overlay5 ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; }.overlay5 ul li { display: block; height: 25%; height: calc(100% / 4); min-height: 50px; position: relative; opacity: 0; }.overlay5 ul li a { display: block; position: relative; color: #fff; text-decoration: none; overflow: hidden; }.overlay5 ul li a:hover:after, .overlay5 ul li a:focus:after, .overlay5 ul li a:active:after { width: 100%; }.overlay5 ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #fff; transition: 0.35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay5" id="overlay5"> <nav class="overlay-menu"> <ul> <li><a class="myClass smoothscroll1" href="#">Home</a></li> <li><a class="myClass smoothscroll2" href="#about">About</a></li> <li><a class="myClass smoothscroll3" href="#work">Work</a></li> <li><a class="myClass smoothscroll4" href="#contact">Contact</a></li> </ul> </nav> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.