real off-canvas

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<input type="checkbox" id="menu">
<label for="menu" onclick></label>


<nav role="off-canvas">
    <ul>
        <li><a href="#">Stream</a></li>
        <li><a href="#">Lab</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<div class="content">
<p>Fap cray leggings wes anderson, freegan shoreditch bespoke locavore echo park.  Pinterest post-ironic sustainable letterpress, leggings echo park gentrify kale chips VHS cosby sweater flexitarian chillwave aesthetic.  Master cleanse small batch sustainable, 3 wolf moon butcher readymade locavore quinoa.  Hella sartorial mcsweeney's, squid banh mi locavore vice four loko brooklyn next level stumptown.  Fap stumptown fingerstache mustache.  Forage 3 wolf moon iphone, williamsburg bushwick mcsweeney's yr pour-over photo booth sustainable swag chillwave terry richardson.  Lo-fi direct trade  yr banh mi butcher, fingerstache odd future flexitarian thundercats mumblecore selvage retro.</p><p>Twee jean shorts whatever fixie.  Carles wolf portland whatever beard mustache authentic lo-fi, cosby sweater squid raw denim leggings gluten-free.  Wayfarers ethical tumblr, fingerstache whatever messenger bag hella letterpress polaroid.  Forage pitchfork pop-up, four loko letterpress whatever pickled mlkshk polaroid gluten-free occupy mcsweeney's narwhal master cleanse typewriter.  American apparel chambray wayfarers, selvage raw denim pork belly fixie Austin hoodie pickled skateboard fap messenger bag four loko cred.  Skateboard terry richardson thundercats, high life polaroid american apparel four loko pitchfork.  Cred street art art party vegan.</p><p>8-bit flexitarian wes anderson seitan, pinterest skateboard salvia you probably haven't heard of them squid pitchfork.  Umami jean shorts gluten-free williamsburg, gentrify put a bird on it vice...

SCSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
   box-sizing:border-box;
}

html,
body {
    width:100%;
    height:100%;
}

body {
    margin:.55em;
    color: rgb(0, 0, 0);
    background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/shattered.png);
}

/* dummy content */
.content {
  float:right;
  position: 0 0;
  font: 1em 'Open Sans', sans-serif;
  margin:.75em 0 0 0;
  transition: margin .3s ease-in-out;
    
  > p {
    margin:.25em 0 .75em 0;      
  }
}

/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: absolute;
  left:0;
  display:none;
  width:2em;
  height:2.25em;
  padding:.35em;
  font-size:1.1em;
  color:#fff;
  transition:color .3s ease-in-out;
  cursor: pointer;
  user-select:none;
  margin:0;
  background:rgba(0, 0, 0, .4); 
}

/* big screens */
nav[role="off-canvas"] {
    position:relative;
    width: 50em;
    margin: 0 auto;
    transition-duration: .3s, .5s;
    transition-timing-function: ease-in-out;
    transition-property: left, opacity, box-shadow;
    
    a {
      color:#fff;
      text-decoration:none;
      font: 1.4em 'Open Sans', sans-serif;
      transition:color .3s ease-in-out;
      display:table-cell;
      vertical-align: middle;
    }
    
    ul {
      padding: 0;  
      margin: 0 auto;  
      width:100%;
    
      > li {
        float:left;
        padding:.55em .55em;
        width:8em;
        height:8em;
        margin:.5em;
        opacity:.8;
    
        text-transform:uppercase;
        display: table;
        background:hsla(11, 94%, 50%, .65);
        cursor: pointer;
    
        text-align:center;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        transition-property: box-shadow, color, opacity, padding-left;
       ...

JavaScript

/*

 */