<header>Header <button id="toggle-nav">Menu</button></header>
<nav>Nav</nav>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus provident nam officiis illo sed quisquam consequuntur eligendi, natus assumenda aliquid omnis impedit sunt laboriosam reiciendis deleniti nostrum adipisci saepe dolores?</div>
<div>Ipsa dolores, molestiae alias nam aperiam nostrum sint repellat eum iste voluptas fugit omnis animi sapiente accusamus similique unde tempore beatae nobis at! Veritatis beatae exercitationem, iste non rem quidem.</div>
<div>Esse commodi ullam nihil doloribus ipsam at et blanditiis dolore iste dolores magni, minus possimus fugiat ipsa est eligendi voluptas. Sequi natus tempore doloremque itaque! Facere ducimus soluta non inventore!</div>
<div>Similique architecto dolorum ullam non atque saepe, qui ducimus harum aperiam iste veniam quae repellat laudantium placeat id distinctio dolor ad excepturi. Beatae saepe facere qui assumenda, quo nemo quod.</div>
<div>Fugit vitae distinctio eos dignissimos repellat, enim beatae nihil porro expedita delectus rem laudantium id iste ullam, perspiciatis, neque debitis aperiam. Ratione officia nesciunt corrupti et, voluptatem officiis fugit vero!</div>
<div>Quo autem voluptates magni error similique corrupti tenetur eos illo voluptatem nobis nulla dolore reprehenderit minus architecto expedita, commodi quia amet optio assumenda. Tempore corporis repellendus possimus, perferendis harum quisquam.</div>
<div>Quasi ab hic placeat, ex fugiat! Velit nemo perferendis vitae expedita, temporibus mollitia ipsam molestias, omnis aliquam explicabo voluptatem, incidunt rerum id quasi reprehenderit porro odio! Vel velit quidem, repellat.</div>
<div>Nisi enim sunt ullam, pariatur veniam aliquam tempora quod, voluptatibus inventore cum hic repellat, molestias maxime vitae tempore! Commodi, adipisci. Aliquam tempora necessitatibus ut veritatis doloribus libero at nam recusandae?</div>
<div>Quasi iure ad reprehenderit reiciendis, eos illo iusto quis quos explicabo pariatur veniam nam sint? Natus vel, maxime error, dolorem tenetur dolore, alias, suscipit eos ipsa ea perspiciatis sapiente ex.</div>
<div>Sed voluptates, nam similique, quos dolores consectetur nostrum natus accusantium itaque eaque odit culpa labore. Totam deleniti fuga sequi possimus temporibus laudantium repudiandae, quaerat laborum quas, ut a. Optio, repudiandae.</div>
</section>
header {
  background-color: #aaa;
  height: 2.8rem;
  position: fixed;
  top: 0;
  width: 100%;
}

nav {
  background-color: #01ff70;
  height: calc(100vh - 2.8rem);
  position: fixed;
  top: 2.8rem;
  transition: transform .2s;
  transform: translate3d(-18rem,0,0);
  width: 18rem;
}
nav.is-opened {
  transform: translate3d(0,0,0);
}

section {
  margin-top: 2.8rem;
  padding: 1em;
}
document.querySelector('#toggle-nav')
  .addEventListener('click', function(){
     document.querySelector('nav')
       .classList.toggle('is-opened');
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js