How to Create Fullscreen Overlay Navigation Menu

Overlay navigation is widely used navigation style in web design. It makes the navigation overlay the menu across the entire screen. In this snippet, we will show how to create, style and trigger a fullscreen overlay navigation menu using JavaScript.

All you need are openNav() and closeNav() functions. When you click on the <span> element the overlay opens:

function openNav() {
document.getElementById("nav").style.width = "100%";
}

When you click on the close symbol the overlay closes:

function closeNav() {
document.getElementById("nav").style.width = "0%";
}

Here are several examples of a fullscreen overlay navigation menu:

<!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>

Let’s see another beautiful example of a fullscreen overlay navigation menu:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/05/6b9dca3dac1686cb8c6bb4bdc3c26cb17ec0b970.png");
        height: 500px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
      .lower {
        width: 340px;
        margin: 30% auto;
        padding: 35px;
        background: #fcd8c2;
        opacity: 0.8;
        color: black;
        box-shadow: inset 0 0 0 1px black;
        border: 30px solid #fcd8c2;
      }
      .lower:hover {
        background: #000000;
        color: white;
        box-shadow: inset 0 0 0 1px #ffffff;
        border: 30px solid #000000;
      }
      input {
        display: none;
      }
      .lower label {
        text-transform: uppercase;
        font-size: 40px;
        text-align: center;
      }
      .lower label:hover {
        cursor: pointer;
      }
      .overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.9);
      }
      .overlay label {
        width: 58px;
        height: 58px;
        position: absolute;
        right: 30px;
        top: 40px;
        background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
        z-index: 100;
        cursor: pointer;
      }
      .overlay nav {
        text-align: center;
        position: relative;
        top: 50%;
        height: 60%;
        font-size: 34px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      .overlay ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: inline-block;
        height: 100%;
        position: relative;
      }
      .overlay ul li {
        display: block;
        height: 20%;
        height: calc(100% / 5);
        min-height: 54px;
      }
      .overlay ul li a {
        font-weight: 300;
        display: block;
        color: white;
        text-decoration: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
        font-family: 'NotCourierSans';
        text-transform: uppercase;
      }
      .overlay ul li a:hover,
      .overlay ul li a:focus {
        color: #f7bb97;
      }
      .lower~.overlay-hugeinc {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
        transition: opacity 0.5s, visibility 0s 0.5s;
      }
      #op:checked~.overlay-hugeinc {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
      }
      .overlay-hugeinc nav {
        -moz-perspective: 300px;
      }
      .overlay-hugeinc nav ul {
        opacity: 0.4;
        -webkit-transform: translateY(-25%) rotateX(35deg);
        transform: translateY(-25%) rotateX(35deg);
        -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
        transition: transform 0.5s, opacity 0.5s;
      }
      #op:checked~.overlay-hugeinc nav ul {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
      }
      #op:not(:checked)~.overlay-hugeinc nav ul {
        -webkit-transform: translateY(25%) rotateX(-35deg);
        transform: translateY(25%) rotateX(-35deg);
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="op"></input>
    <div class="lower">
      <label for="op">click the text</label>
    </div>
    <div class="overlay overlay-hugeinc">
      <label for="op"></label>
      <nav>
        <ul>
          <li><a href="#">Books</a></li>
          <li><a href="#">Quizzes</a></li>
          <li><a href="#">Snippets</a></li>
          <li><a href="#">Tools</a></li>
          <li><a href="#">String Functions</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>