Triangle-In Menu

index.html

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<div id="menu">MENU</div>
<div class="menu-overlay">
<svg>
    <polygon id="left-triangle" points="0,0 0,100 50,50"/>

    <polygon id="top-triangle" points="0,0 100,0 50,50"/>

    <polygon id="right-triangle" points="100,100 100,0 50,50"/>

    <polygon id="bottom-triangle" points="100,100 0,100 50,50"/>
</svg>
  <nav class="menu-overlay__menu">
    <a href="#">People they come together</a>
    <a href="#">People they fall apart</a>
    <a href="#">No one can stop us now</a> 
    <a href="#">'Cause we are all made of stars</a>
  </nav>
</div>

script.js

function sizeTriangles(){
  var w = window.innerWidth;
  var h = window.innerHeight;

  var leftTriangle = document.getElementById('left-triangle');
  var rightTriangle = document.getElementById('right-triangle');
  var topTriangle = document.getElementById('top-triangle');
  var bottomTriangle = document.getElementById('bottom-triangle');

  leftTriangle.setAttribute("points", "0,0 0,"+h+", "+w/2+", "+h/2);

  topTriangle.setAttribute("points", "0,0 " +w+",0 "+w/2+","+h/2);

  rightTriangle.setAttribute("points", w/2+","+h/2+" "+w+",0 "+w+","+h);

  bottomTriangle.setAttribute("points", "0,"+h+" "+w/2+","+h/2+" "+w+","+h);
}

sizeTriangles();
window.addEventListener('resize', function(event){
  sizeTriangles();
});

document.getElementById('menu').addEventListener('click', function(event){
  if(event.target.getAttribute('data-open') === 'true'){
    event.target.innerHTML = "MENU";
    event.target.setAttribute('data-open', 'false');
  }
  else{
    event.target.innerHTML = "CLOSE";
    event.target.setAttribute('data-open', 'true');
  }
  var menu = document.querySelector('.menu-overlay');
  if(menu.classList.contains('active')){
    menu.classList.remove('active');      
  }
  else{
    menu.classList.add('active');
  }
  
})

style.css

// https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

$blend-mode: multiply;
$color: hsl(220, 40%, 50%);
$textColor: hsl(220, 80%, 95%);

body, html{
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}
body{
  background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050);
  background-size: cover;
}
.menu-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  
  
  &__menu{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 1000;
    height: 100%;
    
    a, a:link{
      
      color: $textColor;
      display: block;
      text-decoration: none;
      margin-bottom: 20px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 24px;
      opacity: 0;
      transform: translateY(-100vh);
      
      @for $i from 1 to 10{
        &:nth-child(#{$i}){
          transition: opacity .3s ease-in-out ($i*.3)+s, transform .1s linear;
        }
        }
    }
    
    .menu-overlay.active & {
      a, a:link{
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  
  
  svg{
    background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050);
  background-size: cover;
  }
}

#menu{
  position: fixed;
  z-index: 500;
  top: 28px;
  right: 40px;
  background: transparent;
  padding: 8px 12px;
  color: white;
  border: 2px solid darken($color, 10%);
}

svg{
  
  width: 100%;
  height: 100%;
  position: absolute;
}

polygon{
  opacity: 0;
  mix-blend-mode: $blend-mode;
  
  .menu-overlay.active &{
    opacity: .8;
  }
}

#top-triangle{
  fill: lighten($color, 10%);
    transition: all .2s linear 0s;
}

#right-triangle{
  fill: darken($color, 5%);
    transition: all .2s linear .2s;
}


#bottom-triangle{
  fill: lighten($color, 10%);
    transition: all .2s linear .4s;
}


#left-triangle{
  fill: darken($color, 5%);
  transition: all .6s linear .6s;
  
}

Triangle-In Menu.markdown

Triangle-In Menu

Fun with SVG blend modes. Set $blend-mode to any of the values here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

A Pen by Joseph Martucci on CodePen.

License.