我在为我的网站做一个菜单叠加。由于我相对缺乏经验，我基于我在W3Schools上找到的this one的my program。

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()">&times;</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在打开时跟随菜单的其余部分。
第二个错误对我来说更令人困惑。每当菜单关闭时，为了防止按钮像菜单内容一样隐藏在屏幕外，按钮的位置被切换到相对位置。虽然这可以防止它离开屏幕，但它会导致它不平稳地滑回原位。
修复的目标最好是使用百分比来适应不同的屏幕和窗口大小。谢谢你的帮忙。