%body

  %header
    %button{:class => "nav-button button-lines button-lines-x close", :type => "button", :role => "button", "aria-label" => "Toggle menu"}
      %span{:class => "lines"}

  %main
    .container
      %h1 3D Side Navigation

  %nav{:class => "nav-wrapper"}
    %ul{:class => "nav"}
      %li{:class => "active"}
        %a{:href => "#"} Page 1
      %li
        %a{:href => "#"} Page 2
      %li
        %a{:href => "#"} Page 3
      %li
        %a{:href => "#"} Page 4
        
    %span{:class => "nav-marker color-1"}
View Compiled
//== Variables
//
$color-white:                  #fff;
$color-white-darker:           darken($color-white, 5%);
$color-white-darken:           darken($color-white, 15%);
$header-height:                80px;
$nav-toggle-size:              2rem;
$nav-toggle-transition-speed:  .3s;
$nav-transition-speed:         .6s;
$nav-width:                    25vw;
$zindex-header:                500;

//== Reset styles
//
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
}

body {
  background-color: #333;
}

h1, h2, h3, h4, h5, h6 {
  color: $color-white-darker;
}

h1 { font-size: 2.441rem; }

a {
  color: $color-white-darker;
  text-decoration: none;
  
  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

header {
  height: $header-height;
  left: 0;
  padding: 0.5rem;
  position: fixed;
  text-align: right;
  top: 0;
  transition: transform $nav-transition-speed;
  width: 100%;
  z-index: $zindex-header;
  
  .nav-visible & {
    //transform: translateX(-$nav-width);
  }
}

main {
  background-color: #485274;
  height: 100vh;
  padding-top: $header-height;
  transform-origin: left center;
  transition: transform $nav-transition-speed 50ms;

  .nav-visible & {
    //transform: perspective(1000px) rotateY(1deg);
    //transform: translateX(-$nav-width);
  }
}

.container {
  margin: 0 auto;
  width: 80%;
}

.nav-button {
  text-transform: uppercase;
}

.nav-wrapper {
  background-color: #343c55;
  box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.75);
  height: 100%;
  padding-top: $header-height;
  perspective: 1000px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform $nav-transition-speed, visibility $nav-transition-speed;
  visibility: hidden;
  width: $nav-width;
  
  .nav-visible & {
    transform: translateX(0);
    visibility: visible;
  }
}

.nav {
  position: relative;
  transform: rotateY(90deg);
  transform-origin: left center;
  transition: transform $nav-transition-speed;
  
  .nav-visible & {
    transform: rotateY(0deg);
  }
  
  li {
    &.active {
      a {
        background-color: #212635;
      }
    }
  }
  
  a {
    display: block;
    line-height: 1.4;
    padding: 0.7em 0.5em 0.7em 1.4em;
    text-transform: uppercase;
    
    &:focus,
    &:hover {
      background-color: #2b3145;
      text-decoration: none;
    }
  }
}

//== Nav active marker
//
.nav-marker {
  background-color: currentColor;
  height: 2.8rem;
  position: absolute;
  right: 0;
  top: $header-height;
  width: 3px;
  
  &:before {
    border: 5px solid transparent;
    border-right-color: inherit;
    content: "";
    height: 0;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
  }
}

.color-1 {
  color: deeppink;
}

//== Menu toggle (hamburgen)
//
@mixin button-lines {
  background: $color-white;
  border-radius: $nav-toggle-size/10;
  display: inline-block;
  height: $nav-toggle-size/10;
  width: $nav-toggle-size;
  
  &:hover {
    background: #000;
  }
}

.button-lines {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: $nav-toggle-size/2 $nav-toggle-size/4;
  user-select: none;
}

.lines {
  @include button-lines;
  position: relative;
  
  &:after,
  &:before {
    @include button-lines;
    content: "";
    left: 0;
    position: absolute;
  }

  &:after {
    top: $nav-toggle-size/4;
  }
  
  &:before {
    top: -$nav-toggle-size/4;
  }
}

.button-lines-x {
  .lines {
    transition: background .3s ease;

    &:after,
    &:before {
      transform-origin: 50% 50% 0;
      transition: top .3s .4s ease, transform .3s ease;
    }    
  }

  .nav-visible & {
    .lines {
      background: transparent;
      
      &:after,
      &:before {
        top: 0;
        transition: top .3s ease, transform .3s .3s ease;
      }
      
      &:after {
        transform: rotate3d(0, 0, 1, 45deg);
      }
      
      &:before {
        transform: rotate3d(0, 0, 1, -45deg);
      }
    }
  }
}
View Compiled
let navButton = document.querySelector(".nav-button");

navButton.addEventListener("click", (e) => { 
  e.preventDefault();
  
  // toggle nav state
  document.body.classList.toggle("nav-visible");
});
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway:400,500,300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js