// navigation menu
#hamburger(data-key='27')
  span
  span
  span
nav.nav.nav-hidden
  .esc Esc
  a(href='#' style='align-self: center;')
    img.logoimg(src='https://samhowell.dev/img/sam-howell-logo.svg' alt='Sam Howell' style='align-self: center;')
  ul
    li
      a(href='#' onclick='toggleNav()') reach out
    li
      a(href='#' onclick='toggleNav()') about me
    li
      a(href='#' onclick='toggleNav()') my projects
    li
      .social-icons
        a(href='#')
          i.icon.fa.fa-paper-plane 
        a(target='_blank' rel='noreferrer' href='#')
          i.icon.fab.fa-codepen
        a(href='#' target='_blank' rel='noreferrer')
          i.icon.fab.fa-dev
        a(target='_blank' rel='noreferrer' href='#')
          i.icon.fab.fa-github

// page content
header

img(src="https://source.unsplash.com/1600x400/?beach,water")

.wrap
  h1 Fade-in-out full screen nav menu
  
  p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla odio, varius quis mattis quis, hendrerit ut dolor. Fusce tincidunt nisi a dui dapibus, ut ullamcorper enim tempus. Morbi ac arcu a justo cursus euismod in at neque. In hac habitasse platea dictumst. Curabitur luctus mauris nisi, sed malesuada dui viverra vel. Ut maximus non nibh ut pretium. Morbi eros sapien, faucibus ac urna a, tincidunt fringilla sem. Donec lacinia augue magna, eget gravida ante feugiat non. Fusce vitae tortor at justo rhoncus ultrices. Etiam vel vehicula mi. Integer fermentum consequat odio, ac elementum metus malesuada eget. Vestibulum posuere orci in lectus mollis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla sed turpis id libero rutrum venenatis. Donec lacus libero, egestas sed posuere at, tincidunt at enim. Donec nec neque venenatis, condimentum magna sed, dapibus ipsum.
  
  
  
  p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla odio, varius quis mattis quis, hendrerit ut dolor. Fusce tincidunt nisi a dui dapibus, ut ullamcorper enim tempus. Morbi ac arcu a justo cursus euismod in at neque. In hac habitasse platea dictumst. Curabitur luctus mauris nisi, sed malesuada dui viverra vel. Ut maximus non nibh ut pretium. Morbi eros sapien, faucibus ac urna a, tincidunt fringilla sem. Donec lacinia augue magna, eget gravida ante feugiat non. Fusce vitae tortor at justo rhoncus ultrices. Etiam vel vehicula mi. Integer fermentum consequat odio, ac elementum metus malesuada eget. Vestibulum posuere orci in lectus mollis dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla sed turpis id libero rutrum venenatis. Donec lacus libero, egestas sed posuere at, tincidunt at enim. Donec nec neque venenatis, condimentum magna sed, dapibus ipsum.
View Compiled
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  background: #222;
  color: #ccc;
  font-family: monospace;
}

.wrap {
  width: 60%;
  margin: 2rem auto; 
  max-width: 900px;
  font-size: 2rem;
}

.esc {
  position: fixed;
  top: 0;
  margin: 5px;
  padding: 15px 12px;
  border: 2px #222 solid;
  border-radius: 5px;
  font-size: 2rem;
  user-select: none;
}

img {
  width: 100%;
}
p {
  padding: 2rem 0;
}
nav {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
header {
  height: 50px;
}

.logoimg {
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.nav-fadein {
  opacity: 1;
}
.nav {
  overflow: hidden;
  background: rgb(0, 0, 0, 0.95);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.nav-hidden {
  display: none;
}

.nav li {
  list-style-type: none;
  padding: 20px 0;
  user-select: none;
}

.nav a {
  color: #fff;
  font-size: 4rem;
  text-decoration: none;
}

.nav a:hover {
  color: #26a6ff;
}

.nav ul {
  padding-inline-start: 0;
}


.icon {
padding: 0 10px;
}

#hamburger {
  width: 30px;
  height: 26px;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  margin: 10px;
  z-index: 2;
  background-image: radial-gradient(#000, rgba(0.0.0.0.0));
}

#hamburger span {
  display: block;
  position: fixed;
  height: 4px;
  width: 100%;
  background: #fff;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

#hamburger span:nth-child(1) {
  top: 0px;
}

#hamburger span:nth-child(2) {
  top: 9px;
}

#hamburger span:nth-child(3) {
  top: 18px;
}

#hamburger.open span:nth-child(1) {
  top: 10px;
  transform: rotate(135deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#hamburger.open span:nth-child(3) {
  top: 10px;
  transform: rotate(-135deg);
}

/* hamburger icon css credit: https://codepen.io/designcouch/pen/Atyop */
// navigation menu
const hamburger = document.querySelector('#hamburger');
const nav = document.querySelector('nav');
const links = document.querySelectorAll('.nav a, #hamburger');
function toggleNav() {
  if (nav.classList.contains('nav-fadein')){
  hamburger.classList.toggle('open');
  nav.classList.toggle('nav-fadein');
      window.setTimeout(function waitToHide() {
        nav.classList.toggle('nav-hidden');  
       }, 500);       
 } 
 else if (nav.classList.contains('nav-hidden')){
    nav.classList.toggle('nav-hidden');
    window.setTimeout(function waitToMakeVisible() {
       hamburger.classList.toggle('open');
       nav.classList.toggle('nav-fadein');
      }, 1);
    };
};
links.forEach(function addListenerToAllNavLinks(item){item.addEventListener('click', () => toggleNav())});
window.addEventListener('keydown',event => {if (event.keyCode === 27) {toggleNav()}});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.