Edit in JSFiddle

<script>
  function toggleBTN() {
    var hidden = document.getElementById("hidden");
    hidden.style.height = window.innerHeight - 60 + "px";
    if (hidden.style.right == "0px") {
      hidden.style.right = "-300px";
    } else {
      hidden.style.right = "0px";
    }
  }

</script>
<div id="Btn" onclick="toggleBTN()">
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="hidden">
  <ul>
    <li>MENU ITEM 1</li>
    <li>MENU ITEM 2</li>
    <li>MENU ITEM 3</li>
  </ul>
</div>
<div id="page_content">
  <script>
    for (var i = 0; i < 10; i++) {
      document.write("<h2>" + (i + 1) + ". Dummy page content ... </h2>");
    }

  </script>
</div>
#Btn {
  position: fixed;
  right: 20px;
  width: 20px;
  height: 24px;
  background: linear-gradient(#FFF, #DDD);
  border: #AAA 1px solid;
  border-radius: 2px;
  padding: 2px 5px;
  cursor: pointer;
  transition: border 0.3s linear 0s;
}

#Btn:hover {
  border: #06F 1px solid;
}

#Btn:hover div {
  background: #06F;
}

#Btn > div {
  width: 20px;
  height: 4px;
  background: #333;
  margin: 3px 0px;
  border-radius: 4px;
  transition: background 0.3s linear 0s;
}

#hidden {
  position: fixed;
  right: -300px;
  top: 60px;
  width: 260px;
  height: 0px;
  background: #333;
  color: #ededed;
  padding: 15px;
  transition: right 0.3s linear 0s;
}