title: Css Slide Content
body: <p>I am trying to achieve a push up content via css. I got the basic code from a slide menu tutorial and most of it works well.</p>
  
  <p>But my "slide menu" goes all the way up to the top of the page when triggered, but I want it to only slide up 80% of the screen size, and I should only be this high itself. Tried alot but just can't figure it out.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="container"&gt;
    &lt;input id="toggle" type="checkbox"&gt;&lt;label for="toggle"&gt;&amp;equiv;&lt;/label&gt;
  
    &lt;div class="content"&gt; content&lt;/div&gt;
  
    &lt;div class="slide-menu"&gt; &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
     height: 100%;
  }
  
  body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
  }
  
  #container {
     display: flex;
     min-height: 100%;
  }
  
  input[type=checkbox] {
     position: absolute;
     opacity: 0;
  }
  
  label {
     position: absolute;
     top: 10px;
     left: 40px;
     z-index: 1;
     display: block;
     font-size:3em;
     color: #444;
     cursor: pointer;
     transform: translate3d(0, 0, 0);
     transition: transform .4s;
  }
  
  input[type=checkbox]:checked ~ label {
     transform: translate3d(50px, 0, 0) rotate(0deg);
  }
  
  .content {
     width:100%;
     padding: 40px;
     background: #00FFA3;
     transform: translate3d(0, 0, 0);
     transition: transform .4s;
  }
  
  input[type=checkbox]:checked ~ .content {
     transform: translate3d(0, -250px, 0);
  }
  
  input[type=checkbox]:checked ~ .slide-menu {
     transform: translate3d(0, 0%, 0);
  }
  
  .slide-menu {
     transform: translate3d(0, 120%, 0);
     position: absolute;
     width: 100%;
     background: #4f6b81;
     color: #ddd;
     left: 0;
     height: 80%;
     transition: all .4s;
  }
  </code></pre>