大佬教程收集整理的这篇文章主要介绍了全屏覆盖菜单切换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想创建一个全屏覆盖菜单。我无法在单击锚点时关闭菜单，例如。如果我们点击主页。它向下滚动到该部分，但不会关闭覆盖层。 我曾尝试添加一些 jquery，但我无法做到。我试图像点击十字一样切换菜单，但没有成功。
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click",function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});.container {
position: absolute;
wIDth: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
Font-family: 'Roboto',sans-serif;
}
.container p {
Font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
Font-size: 20px;
overflow: hIDden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
BACkground: #FF5252;
height: 2px;
wIDth: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
Transition: 0.35s ease;
}
.container a:hover:after {
wIDth: 100%;
}
h1 {
position: relative;
text-align: center;
Font-family: 'Vollkorn',sans-serif;
}
.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: #FF5252;
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;
}
.overlay {
position: fixed;
top: 0;
left: 0;
wIDth: 100%;
height: 100%;
opacity: 1;
visibility: hIDden;
Transition: opacity 0.35s,visibility 0.35s,wIDth 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
BACkground: #FF5252;
left: -55%;
top: 0;
wIDth: 50%;
height: 100%;
position: absolute;
Transition: left 0.35s ease;
}
.overlay:after {
content: '';
BACkground: #FF5252;
right: -55%;
top: 0;
wIDth: 50%;
height: 100%;
position: absolute;
Transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forWARDs;
animation: fadeInRight 0.5s ease forWARDs;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
Font-size: 50px;
Font-family: 'Vollkorn',serif;
Font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
List-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hIDden;
}
.overlay ul li a:hover:after,.overlay ul li a:focus:after,.overlay ul li a:active:after {
wIDth: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
wIDth: 0%;
transform: translateX(-50%);
height: 3px;
BACkground: #FFF;
Transition: 0.35s;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@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>
<body translate='no' >
<div class='container'>
<h1>top right corner,click it!</h1>
</div>
<div class='button_container' ID='toggle'>
<span class='top'></span>
<span class='mIDdle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' ID='overlay'>
<nav class='overlay-menu' ID="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" ID="about" style="BACkground-color: white; height: 100vh;"></section>
<section class="about2" ID="about2" style="BACkground-color:aqua; height: 100vh;"></section>
我在我这边尝试了这段代码，并注意到在这种情况下可以进行一个小的更改。
您使用错误的选择器选择锚点(a)。由于 'fullloverlay' 是父导航元素的 Id，所以不要像这样选择它：
$(".fulloverlay a").on("click",function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
你@R_618_8254@：
$("#fulloverlay a").on("click",function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
然后就可以了。
以上是大佬教程为你收集整理的全屏覆盖菜单切换全部内容，希望文章能够帮你解决全屏覆盖菜单切换所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。