I have been trying to move my content div to the left when triggering the menu toggle, ideally without a jump but a push transition. The content div should only slide aside the width of the open sidebar. The following code keeps the sidebar icon always in view, which is what I want, but overlays the content div. What would I need to add to the JQuery function & CSS in order to achieve this?

jQuery(function($) {
  $("#side").click(function() {
    $('#slidable').toggleClass("open");
  });
})

#side {
  position:absolute;
  right:100%;
  width: 50px;
  height: 50px;
  z-index: 1000000;
  color:black;
}

#slidable {
  position: fixed;
  top:0;
  height: 100vh;
  background: black;
  width: 200px;
  left: 100%;
  transition: 0.4s;
  z-index: 1000000;
  color:black;
  text-align:center;
  font-size:25px;
  font-weight: 300;
  color:white;
}

#slidable.open{
  left: calc(100% - 200px);
}

.fa {
  font-size:30px!;
  margin-top:25px;
  color:black;
}

<link rel="stylesheet" href=".7.0/css/font-awesome.min.css">
<script src=".3.1/jquery.min.js"></script>

<div id="slidable">
  <div id="side" class="icon">
      <i class="fa fa-bars"></i>
  </div>
  <div>
      <p>Link 1</p>
      <p>Link 2</p>
      <p>Link 3</p>
      <p>Link 4</p>
      <p>Link 5</p>
  </div>
</div>
<div id="content">
  <p>hallo</p>
</div>

I have been trying to move my content div to the left when triggering the menu toggle, ideally without a jump but a push transition. The content div should only slide aside the width of the open sidebar. The following code keeps the sidebar icon always in view, which is what I want, but overlays the content div. What would I need to add to the JQuery function & CSS in order to achieve this?

jQuery(function($) {
  $("#side").click(function() {
    $('#slidable').toggleClass("open");
  });
})

#side {
  position:absolute;
  right:100%;
  width: 50px;
  height: 50px;
  z-index: 1000000;
  color:black;
}

#slidable {
  position: fixed;
  top:0;
  height: 100vh;
  background: black;
  width: 200px;
  left: 100%;
  transition: 0.4s;
  z-index: 1000000;
  color:black;
  text-align:center;
  font-size:25px;
  font-weight: 300;
  color:white;
}

#slidable.open{
  left: calc(100% - 200px);
}

.fa {
  font-size:30px!;
  margin-top:25px;
  color:black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slidable">
  <div id="side" class="icon">
      <i class="fa fa-bars"></i>
  </div>
  <div>
      <p>Link 1</p>
      <p>Link 2</p>
      <p>Link 3</p>
      <p>Link 4</p>
      <p>Link 5</p>
  </div>
</div>
<div id="content">
  <p>hallo</p>
</div>

• javascript
• jquery
• css
• slidetoggle

• do you want to hide content div when side menu icon is pressed? – Akshay Mulgavkar Commented Feb 27, 2019 at 12:19
• For regular desktop view, not hide, but slide aside. Basically, if the sidebar menu slides out from the right to the left, 200px in width, the content div should slide out to the left in the same motion, leaving the content div margin -200px, basically. Hiding the content div would be interesting for mobile view later on, but that was not the initial issue I was focusing on. – user8139445 Commented Feb 27, 2019 at 13:28
• daneden.github.io/animate.css try this animation library with jQuery. Easy enough to implement. Just don't forget to include the animate.css file in the header :) – Akshay Mulgavkar Commented Feb 27, 2019 at 14:22
• Thanks!! Will look into it :) – user8139445 Commented Feb 27, 2019 at 17:22

1 Answer 1

i did add this:

.content {
  position: relative;
  left: 0;
  transition: left 0.4s;
}

.slidable.open + .content{
  left: -200px;
}

And i do refactored to use CSS classes as selectors in the Stylesheet.

jQuery(function($) {
  $("#side").click(function() {
    $('#slidable').toggleClass("open");
  });
})

.side {
  position: absolute;
  right: 100%;
  width: 50px;
  height: 50px;
  z-index: 1000000;
  color: black;
}

.slidable {
  position: fixed;
  top: 0;
  height: 100vh;
  background: black;
  width: 200px;
  right: 0;
  transition: 0.4s;
  z-index: 1000000;
  color: black;
  text-align: center;
  font-size: 25px;
  font-weight: 300;
  color: white;
}

.slidable.open{
  right: 200px;
}

.content {
  position: relative;
  left: 0;
  transition: left 0.4s;
}

.slidable.open + .content{
  left: -200px;
}

.fa {
  font-size: 30px;
  margin-top: 25px;
  color: black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slidable" class="slidable">
  <div id="side" class="side icon">
      <i class="fa fa-bars"></i>
  </div>
  <div>
      <p>Link 1</p>
      <p>Link 2</p>
      <p>Link 3</p>
      <p>Link 4</p>
      <p>Link 5</p>
  </div>
</div>
<div id="content" class="content">
  <p>hallo, give me just a bit more content here</p>
</div>