Изменение родительского элемента, когда JavaScript применяет преобразование

Question

Я пытаюсь создать навигацию по боковому меню, которая будет скользить по экрану при нажатии кнопки.У меня есть контейнер вокруг меню и кнопки, чтобы они двигались вместе.Ширина контейнера составляет 13% вместе с меню, что странно, что меню составляет 13% от тела, а не от контейнера.Тем не менее, когда я нажимаю кнопку, ширина меню становится 13% от контейнера и больше не тела.Я хотел бы, чтобы ширина оставалась неизменной, но я не могу понять, почему это происходит.

Примечание У меня есть несколько листов CSS для каждого размера экрана, поэтому функция screenize() есть.

function navfunction() {
  var z;

  function screensize() {
    if (window.innerWidth < 600) {
      z = "translateX(-50%)";
    } else {
      z = "translateX(-15%)";
    }

    if (window.innerWidth > 1650) {
      z = "translateX(-13%)";
    } else {
      z = z;
    }
  }

function navmove() {
    var x = document.getElementsByClassName("navanimate")[0];
    if (x.style.transform === "none") {
      x.style.transform = z;
    } else {
      x.style.transform = "none";
    }
  }
  screensize();
  navmove();
}

.nav {
  display: inline-block;
  background-color: #efefef;
  padding: 0px 0px 0px 0px;
  width: inherit;
  position: fixed;
  overflow: hidden;
  height: 100%;
  border-right: 2px solid #bababa;
}

.navanimate {
  transition: transform .8s;
  transition-timing-function: ease-out;
  position: fixed;
  height: 100%;
  width: 15%;
  background-color: red;
  padding-right: 0px;
}

.centernav {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-51%);
}

.menupic {
  position: fixed;
  width: 35px;
  height: 35px;
  cursor: pointer;
  top: 49%;
  left: 15%;
  background-color: #efefef;
  border: 2px solid #bababa;
  border-left: none;
  padding: 12px 0px 12px 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.navop {
  display: inline-block;
  color: black;
  text-decoration: none;
  font-family: verdana;
  font-size: 17px;
  margin: 0px 0px 0px 0px;
  padding: 15px 0px 15px 15px;
  width: 100%;
}

.navop:hover {
  background-color: white;
}

<span class="navanimate" style="transform:none;">
    <span class="nav">
    <span class="centernav">
    <span class="current"><a class="navop" href="index.html">Home</a></span><br>
<a class="navop" href="about.html">About Us</a><br><a class="navop" href="documents.html">Documents</a><br><a class="navop" href="events.html">Events and <span class="navbreaker"></span>Calendar</a>
<br><a class="navop" href="contact.html">Contact Info</a><br><a class="navop" href="clubhouse.html">Clubhouse</a><br><a class="navop" href="index.html">Architectural <span class="navbreaker"></span>Control</a>
<br><a class="navop" href="index.html">Dues</a><br><a class="navop" href="index.html">Parking</a><br><a class="navop" href="index.html">Pool</a>
<br><a class="navop" href="index.html">Trash and Recycle</a>
</span>
</span>

<img src="menupic.png" class="menupic" onclick="navfunction()">
</span>

Answer 1

Я думаю, что вы можете сойтись с вашим javascript, выполнив одну вещь: добавление и удаление класса open.

Все остальное, что вы сможете достичь с помощью CSS.

function navfunction() {
  document.querySelector('.nav.animate').classList.toggle('open')
}

body,
html {
  margin: 0;
}

.nav {
  position: fixed;
  height: 100%;
  width: 15%;
  background-color: red;
}
.nav.open {
  transform: translatex(-100%);
}
.nav.animate {
  transition: transform 0.8s;
}
.nav-button {
  display: block;
  background: black;
  position: absolute;
  width: 35px;
  height: 35px;
  cursor: pointer;
  top: 50%;
  transform: translatey(-17px);
  right: -35px;
}
.nav-item {
  display: block;
}

<div class="nav animate">
  <div class="nav-items">
    <a class="nav-item" href="index.html">Home</a>
    <a class="nav-item" href="about.html">About Us</a>
    <a class="nav-item" href="documents.html">Documents</a>
    <a class="nav-item" href="events.html">Events and Calendar</a>
    <a class="nav-item" href="contact.html">Contact Info</a>
    <a class="nav-item" href="clubhouse.html">Clubhouse</a>
    <a class="nav-item" href="index.html">Architectural Control</a>
    <a class="nav-item" href="index.html">Dues</a>
    <a class="nav-item" href="index.html">Parking</a>
    <a class="nav-item" href="index.html">Pool</a>
    <a class="nav-item" href="index.html">Trash and Recycle</a>
  </div>
  <span class="nav-button" onclick="navfunction()"><span>
</div>