Edit in JSFiddle

<header>
  <a no-js on-click-toggle-class=".sidemenu active">
    <img src="https://github.com/ifedapoolarewaju/nojs/raw/master/example/menu.png" width="30px">
  </a>
</header>

<div>Demo! Click the menu icon above</div>
<div class="sidemenu">
  <div class="content">
    <p>Blank content ...</p>
  </div>
</div>

body {
  font-family: sans-serif;
  background: white;
  color: black;
}

header {
  height: 50px;
  border-bottom: 1px #e0e0e0 solid;
  margin-bottom: 10px;
}

.sidemenu {
  position: absolute;
  height: calc(100% - 56px);
  top: 56px;
  left: -360px;
  width: 300px;
  background: #e0e0e0;
  padding: 0 30px;
  transition: all ease 0.3s;
}

.sidemenu.active {
  transform: translateX(360px);
}

// no javascript.