Stretch body when navigation element is being hidden

user_17733972 0
Viewed 24

Whenever I toggle the menu on the left to slide away, I want the body element to stretch to full width, how can I achieve this? Is using translate option not good for this? I want to use translate because the animation effect. The body width is 100% but it wont stretch fully

const nav = document.querySelector('.nav')
function toggleNav() {
    nav.classList.toggle("translate")
}
.container {
  display: flex;
}

.nav {
  width: 150px;
  background: red;
  height: 100vh;
}

.body {
  width: 100%;
  background: blue;
}

.translate {
  transform: translateX(-100%);
  transition: 0.5s;
}
<button onClick="toggleNav()">
  Toggle
</button>
<div class="container">

  <div class="nav">
    nav
  </div>

  <div class="body">
    test
  </div>

</div>

css html
1 Answers

with transform: translateX, the element remains in the stream. you can use the width

const nav = document.querySelector('.nav')
function toggleNav() {
    nav.classList.toggle("translate")
}
.container {
  display: flex;
}

.nav {
  width: 150px;
  background: red;
  height: 100vh;
  transition: 0.5s;
}

.body {
  width: 100%;
  background: blue;
}

.translate {
  opacity: 0;
  width: 0;
}
<button onClick="toggleNav()">
  Toggle
</button>
<div class="container">

  <div class="nav">
    nav
  </div>

  <div class="body">
    test
  </div>

</div>

OR, you can add width and padding for body

.translate + .body {
  width: calc(100% + 150px);
  margin-left: -150px;
}
user_42752770
Related