Parent element changing when javascript applies a transformation

I am trying to create a side menu navigation that slides into and off of the screen when you click a button. I have a container around the menu and the button so that they move together. The width of the container is 13% along with the menu which is weird that the menu is 13% of the body and not of the container. However, when I click the button the menu width becomes 13% of the container and no longer of the body. I would like the width to stay the same but I cannot figure out why it is doing this.

Note I have multiple CSS sheets for each screen size that is why function screensize() is there.

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

I think you can get away with your javascript doing a single thing: adding and removing an open class.

Everything else you should be able to achieve with 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;
  border: none;
}
.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>
  <button class="nav-button" onclick="navfunction()"></button>
</div>

Advertisement

Answer