Simple Side menu

HTML

<link rel="stylesheet" href="https://rawgit.com/necolas/normalize.css/master/normalize.css">
<div class="document">
  <header>
    <button id="navToggle">
      =
    </button>
  </header>
  <nav></nav>
  <main>
    <section></section>
    <aside></aside>
  </main>
  <footer></footer>
</div>

CSS

.document {height: 100%; }
header {
  width: 100%;
  height: 60px;
  background-color: #ededed;
}
nav {
  position: absolute;
  top: 60px;
  left: 0px;
  z-index: 2;
  width: 45%;
  height: 100%;
  background-color: #363636;
  transition: left 0.3s, transform 1s;
}
nav.closed {
  left: -45%;
}

JavaScript

var navToggle = document.querySelector('#navToggle');
navToggle.addEventListener('click', function(e){
	toggleNav(e);
})
function toggleNav () {
  var nav = document.querySelector('nav');
  nav.classList.hide();
}