How can I polish this transition between the opening and closing of a menu?

Question

I'm making a menu overlay for my website. Since I'm relatively inexperienced, I based my program off of this one I found on 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()">&times;</a>
  <div class="overlay-content">
    <a href="#">Option</a>
    <a href="#">Option</a>
    <a href="#">Option</a>
    <a href="#">Option</a>
  </div>
</div>

My problems lie in the transition between the opening and closing of the menu. First, the text that makes up the options in the menu snap downwards upon closing, despite acting normally during the opening. Second, the X button that opens and closes the menu also works fine during the opening, but during the closing it snaps back to its original location.

For once, I am actually aware of what's causing the first error, and it lies in the changing of the position values of the X button in-between transitions. The problem seems to be fixed if I prevent the button from changing its position to absolute when it gets clicked, but that also stops the X from following the rest of the menu when it opens.

The second error is a little more confusing to me. Whenever the menu closes, to prevent the button from being hidden off-screen like the menu content, the button's position is switched to relative. While this prevents it from going off-screen, it causes it to jarringly snap back into place instead of smoothly sliding over.

The goal of the fix would preferably work with percentages to accommodate different screen and window sizes. Thanks for your help.

Answer 1

The button for opening and closing the menu is becoming solid when closing. That is why the buttons are being pushed down.

Instead just keep the button position absolute and only change the transform translateX values.

Example:

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%);
}