我正在为我的网站制作一个菜单叠加层。由于我相对缺乏经验,我的我的程序基于我在W3Schools上找到的这个。
var menuOpen = false;
function toggleNav() {
if (menuOpen == true) {
document.getElementById("nav").style.width = "0%";
document.getElementById("menubtn").style.position = "relative";
} else {
document.getElementById("nav").style.width = "50%";
document.getElementById("menubtn").style.position = "absolute";
}
menuOpen = !menuOpen;
}
.overlay {
height: 100%;
width: 0%;
z-index: 1;
left: 0;
top: 0;
transition: 0.2s;
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
}
.overlay a {
transition: 0.2s;
padding-block: 8px;
color: #929292;
text-decoration: none;
display: block;
overflow: hidden;
}
.overlay a:hover {
color: #F2F2F2;
}
.overlay-content {
font-size: 16px;
width: 100%;
top: 25%;
z-index: 1;
position: relative;
text-align: center;
}
.overlay .menubutton {
top: -20px;
right: 0px;
font-size: 36px;
z-index: 2;
position: relative;
overflow: visible;
}
<div id="nav" class="overlay">
<a id="menubtn" class="menubutton" onclick="toggleNav()">×</a>
<div class="overlay-content">
<a href="#">Option</a>
<a href="#">Option</a>
<a href="#">Option</a>
<a href="#">Option</a>
</div>
</div>
我的问题在于菜单打开和关闭之间的过渡。首先,构成菜单中选项的文本在关闭时会向下对齐,尽管在打开期间表现正常。其次,打开和关闭菜单的 X 按钮在打开过程中也可以正常工作,但在关闭过程中它会弹回到原来的位置。
这一次,我实际上意识到了导致第一个错误的原因,它在于转换之间 X 按钮的位置值的变化。如果我阻止按钮在单击时将其位置更改为绝对位置,那么问题似乎就得到了解决,但这也阻止了 X 在打开时跟随菜单的其余部分。
第二个错误让我有点困惑。每当菜单关闭时,为了防止按钮像菜单内容一样隐藏在屏幕外,按钮的位置会切换到相对位置。虽然这可以防止它离开屏幕,但会导致它突然弹回原位,而不是平滑地滑过。
修复的目标最好是使用百分比来适应不同的屏幕和窗口尺寸。感谢您的帮助。
打开和关闭菜单的按钮在关闭时变得稳定。这就是按钮被按下的原因。
相反,只需保持按钮位置绝对并且仅更改变换translateX值。
示例:
var menuOpen = false;
function toggleNav() {
if (menuOpen == true) {
document.getElementById("nav").style.width = "0%";
document.getElementById("menubtn").classList.remove("hide");
} else {
document.getElementById("nav").style.width = "50%";
document.getElementById("menubtn").classList.add("hide");
}
menuOpen = !menuOpen;
}
.overlay {
height: 100%;
width: 0%;
z-index: 1;
left: 0;
top: 0;
transition: 0.2s;
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
}
.overlay a {
transition: 0.2s;
padding-block: 8px;
color: #929292;
text-decoration: none;
display: block;
overflow: hidden;
}
.overlay a:hover {
color: #F2F2F2;
}
.overlay-content {
font-size: 16px;
width: 100%;
top: 25%;
z-index: 1;
position: relative;
text-align: center;
}
.overlay .menubutton {
top: -20px;
right: 0px;
font-size: 36px;
z-index: 2;
position: absolute;
overflow: visible;
transform: translateX(100%);
}
.overlay .menubutton.hide {
transform: translateX(0%);
}