Javascript a fullscreen overlay navigation menu

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-family: 'Veranda', sans-serif;
      }
      span {
        font-size: 22px;
        cursor: pointer
      }
      .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #001536;
        overflow-x: hidden;
        transition: 0.5s;
      }
      .overlay-content {
        position: relative;
        top: 30%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      .overlay a {
        padding: 10px;
        text-decoration: none;
        font-size: 32px;
        color: #7792a3;
        display: block;
        transition: 0.4s;
      }
      .overlay a:hover,
      .overlay a:focus {
        color: #eeeeee;
      }
      .overlay .close {
        position: absolute;
        top: 10px;
        right: 35px;
        font-size: 50px;
      }
      @media screen and (max-height: 450px) {
        .overlay a {
          font-size: 20px
        }
        .overlay .closed {
          font-size: 40px;
          top: 15px;
          right: 35px;
        }
      }
    </style>
  </head>
  <body>
    <div id="nav" class="overlay">
      <a href="javascript:void(0)" class="closed" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="#">Books</a>
        <a href="#">Quizzes</a>
        <a href="#">Snippets</a>
        <a href="#">Tools</a>
      </div>
    </div>
    <span onclick="openNav()">&#9776; Click Here</span>
    <script>
      function openNav() {
        document.getElementById("nav").style.width = "100%";
      }
      function closeNav() {
        document.getElementById("nav").style.width = "0%";
      }
    </script>
  </body>
</html>