<div class="site" id="site">
  <div class="ham" id="navicon" onClick="toggleMobileNav()">
    <div class="ham__burger"></div>
    <div class="ham__burger"></div>
    <div class="ham__burger"></div>
  </div>
  
  <div class="overlay"></div>
  
  <div class="content"></div>
  
</div>
body {
  margin: 0;
  padding: 0;
}

.site {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  position: relative;
}

.ham {
  font-size: 2rem;
  height: 2.5em;
  width: 2.5em;
  position: relative;
  z-index: 3;
  
  &:hover {
    cursor: pointer;
  }
  
  &__burger {
    background: white;
    height: .25em;
    border-radius: .125em;
    transition: .25s;
    position: absolute;
    
    &:nth-child(1) {
      width: 70%;
      top: 0;
      right: 0;
      transform-origin: 100% 100%;
      
      .open & {
        width: calc(50% - .125em);
        transform: rotate(-45deg);
        background-color: rebeccapurple;
      }
    }
    
    &:nth-child(2) {
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      
      .open & {
        width: calc(100% + .5em);
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        background-color: rebeccapurple;
      }
    }
    
    &:nth-child(3) {
      width: 65%;
      bottom: 0;
      left: 0;
      transform-origin: 0 0;
      
      .open & {
        width: calc(50% - .125em);
        transform: rotate(-45deg);
        background-color: rebeccapurple;
      }
    }
  }
}

.content {
  position: absolute;
  z-index: 1;
  top: -5px; right: -5px; bottom: -5px; left: -5px;
  background-blend-mode: multiply;
  background-color: rebeccapurple;
  background-image: url('https://i1.wp.com/monkeyhill.us/wp-content/uploads/2016/01/unsplash-buildings-llokingup-clouds.jpg?ssl=1');
  background-position: center center;
  background-size: cover;
  
  .open & {
    filter: blur(10px);
  }
}

.overlay {
  position: absolute;
  z-index: 2;
  top: 0; right: 0; bottom: 0; left: 0;
  background: white;
  opacity: 0;
  transition: .25s;
  
  .open & {
    opacity: .5;
  }
}
var navicon = document.getElementById("navicon");
var site = document.getElementById("site");

function toggleBurger() {
  navicon.classList.toggle("open"),
  site.classList.toggle("open")
}

navicon.addEventListener("click", toggleBurger, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.