How to Create Fullscreen Overlay Navigation Menu

Source Code: (back to article)

Result: Report an issue

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

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