当JavaScript应用转换时父元素发生变化

Question

我正在尝试创建一个侧面菜单导航，当您单击按钮时，该导航可以滑入和滑出屏幕。我在菜单和按钮周围有一个容器，以便它们一起移动。容器与菜单的宽度为13％，奇怪的是菜单占主体的13％，而不是容器的13％。但是，当我单击按钮时，菜单宽度变为容器的13％，而不再是容器的宽度。我希望宽度保持不变，但我不知道为什么这样做。

注意对于每个屏幕尺寸，我都有多个CSS工作表，这就是为什么 function screensize（）存在的原因。

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>