style.css

/*
  resets
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a,button,input,label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove annoying iOS tap highlight */
}

/* 
  structure 
*/

/* .nav sits behind .content using position/fixed z-index */
.nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow-y: scroll;
}

/* hidden input used to trigger .nav */
.nav-trigger {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

/* label contains button used to activate .nav */
.nav-trigger__label {
  position: fixed;
  left: 0; 
  top: 0;
  bottom:0;
  z-index: 2;
  
  /* styling */
  width: 46px;
  height: 46px;
  padding: 15px;
  cursor: pointer;
  
  /* flexbox controls for inner spans used to create the burger icon */
  display:flex;
  flex-direction:column;
  align-items: stretch;
  justify-content:space-around;
  align-content:space-between;
}

/* burger icon bands */
.nav-trigger__label span {
  background-color:black;
  height:2px;
}

/* position:fixed prevents scroll position reset on menu activation in Chrome */
.content {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width: 100vw;
  overflow-y: scroll;
  z-index: 1;
  background-color: white;
}

/* 
  animation + toggle action 
*/

/* TODO : switch to translate for better preformance */
.nav-trigger + label, .content {
  transition: transform 450ms;
}

.nav-trigger:checked + label {
  transform: translate(200px,0);
}

.nav-trigger:checked ~ .content {
  transform: translate(200px,0);
}

/*
  Prevent excess horizontal scroll when the menu is open
  need .prevent-x-scroll as div wrapper: overflow on body is ignored when meta viewport is present(?)
  http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers
*/
.prevent-x-scroll {
  overflow-x: hidden;
}

/*
  styling
*/

.content {
  padding:50px;
}

body {
  font-family:helvetica;
  line-height:1.4;
  font-size:16px;
}

.nav {
  list-style:none;
  padding:0;
  margin:0;
  background-color:whitesmoke;
}

.nav li a {
  display:block;
  color:black;
  text-decoration:none;
  padding:10px;
  font-size:18px;
}