input(type="checkbox")#menu_trigger.menu-trigger
#fullscreen_nav.overlay
  ul.menu-links
    li
      a(href="#") Home
    li
      a(href="#") About Us
    li
      a(href="#") Our Services
    li
      a(href="#") Join Us
    li
      a(href="#") Contact Us
label(for="menu_trigger").hamburger-menu
  span
  span
  span
.main-content
  h1 CSS Only Navigation Menu
  p Click on the 'hamburger menu' at the top-right corner to open the menu.

$number-of-links: 5;

$hamburger-menu-width: 50px;
$hamburger-menu-height: 40px;
$hamburder-menu-x-position: 30px;
$hamburder-menu-y-position: 30px;

$hamburger-icon-background-color: #ffffff;
$hamburger-icon-width: 50px;
$hamburger-icon-height: 6px;
$hamburger-icon-rotate-deg: 45deg;
$hamburger-icon-transform-time: 350ms;

$overlay-background-color: rgba(0, 0, 0, 0.5);
$overlay-starting-position-x: $hamburder-menu-x-position +
  ($hamburger-menu-width / 2);
$overlay-starting-position-y: $hamburder-menu-y-position +
  ($hamburger-menu-height / 2);
$overlay-animation-timing: 125ms;

$menu-link-default-color: #e2e2e2;
$menu-link-hover-color: #ffffff;
$menu-link-emboss-color: rgba(0, 0, 0, 0.8);
$menu-link-shine-color: #ffffff;
$menu-link-font-size: 3em;
$menu-link-spacing: 25px;
$menu-link-shine-size: 25px;
$menu-link-hover-transition-time: 175ms;
$menu-link-hover-transition-time-scale: 275ms;
$menu-link-show-transition-time: 350ms;

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

.menu-trigger {
  display: none;
}

// ---------- OVERLAY AREA
.overlay {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0s linear $overlay-animation-timing,
    height 0s linear $overlay-animation-timing;
  animation: overlay-hide $overlay-animation-timing ease-out forwards;
}

.menu-trigger:checked + .overlay {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  transition: none;
  animation: overlay-mask $overlay-animation-timing ease-out forwards;
}

@keyframes overlay-mask {
  @for $i from 0 through 100 {
    #{$i + 0%} {
      background-image: radial-gradient(
        circle
          at
          calc(100vw - #{$overlay-starting-position-x})
          $overlay-starting-position-y,
        $overlay-background-color ($i + 0%),
        transparent ($i + 0%)
      );
    }
  }
}

@keyframes overlay-hide {
  @for $i from 100 through 0 {
    #{$i + 0%} {
      background-image: radial-gradient(
        circle
          at
          calc(100vw - #{$overlay-starting-position-x})
          $overlay-starting-position-y,
        $overlay-background-color (100 - $i + 0%),
        transparent (100 - $i + 0%)
      );
    }
  }
}

// ---------- MENU LINKS AREA
.menu-links {
  font-size: $menu-link-font-size;
  list-style-type: none;
  li {
    text-align: center;
    margin: $menu-link-spacing 0;
    transition: transform $menu-link-hover-transition-time-scale
      cubic-bezier(0.18, 0.89, 0.32, 1.28);
    a {
      font-family: Montserrat, sans-serif;
      color: $menu-link-default-color;
      font-weight: bold;
      display: block;
      text-decoration: none;
      text-shadow: 0 -1px $menu-link-emboss-color, 0 0 0 $menu-link-shine-color;
      opacity: 0;
      transform: translateX(-25%);
      transition: color $menu-link-hover-transition-time ease-out,
        text-shadow $menu-link-hover-transition-time ease-out,
        opacity $menu-link-hover-transition-time ease-out,
        transform $menu-link-hover-transition-time-scale
          cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    &:hover {
      transform: scale(1.2);
      a {
        color: $menu-link-hover-color;
        text-shadow:
          0 -1px $menu-link-emboss-color
        , 0 0 $menu-link-shine-size $menu-link-shine-color;
      }
    }
  }
}

.menu-trigger:checked + .overlay .menu-links li {
  a {
    transform: translateX(0);
    opacity: 1;
  }
  @for $i from 0 to $number-of-links {
    &:nth-child(#{$i + 1}) a {
      transition: opacity
          $menu-link-show-transition-time
          ease-out
          $overlay-animation-timing +
          ($i * ($menu-link-show-transition-time / 2)),
        transform
          $menu-link-show-transition-time
          ease-out
          $overlay-animation-timing +
          ($i * ($menu-link-show-transition-time / 2));
    }
  }
}

// ---------- HAMBURGER MENU AREA
.hamburger-menu {
  width: $hamburger-menu-width;
  height: $hamburger-menu-height;
  position: absolute;
  top: $hamburder-menu-y-position;
  right: $hamburder-menu-x-position;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  span {
    background-color: $hamburger-icon-background-color;
    width: $hamburger-icon-width;
    height: $hamburger-icon-height;
    flex-grow: 0;
    display: block;
    transition: transform $hamburger-icon-transform-time ease-out;
    transform-origin: center;
  }
}

.menu-trigger:checked ~ .hamburger-menu span {
  &:nth-child(1) {
    transform:
      translateY(($hamburger-menu-height / 2) - ($hamburger-icon-height / 2))
      rotate($hamburger-icon-rotate-deg)
    ;
  }
  &:nth-child(2) {
    transform: scale(1, 0) translateX(-100%);
  }
  &:nth-child(3) {
    transform:
      translateY(-($hamburger-menu-height / 2) + ($hamburger-icon-height / 2))
      rotate(-$hamburger-icon-rotate-deg)
    ;
  }
}

// ---------- MAIN CONTENT AREA
.main-content {
  font-size: 12px;
  background-image: url("https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  h1,
  p {
    color: rgba(#ffffff, 0.8);
    font-family: Montserrat, sans-serif;
    text-align: center;
    text-shadow: 0 -1px rgba(#707070, 0.5);
    max-width: 420px;
  }
  h1 {
    font-size: 4rem;
  }
  p {
    font-size: 2rem;
  }
}

// No javascript