<nav class="nav-main" role="navigation">
  <ul class="menu-toggle">
    <li class="menu-bar bar-1">
    <li class="menu-bar bar-3">
    <li class="menu-bar bar-6">
    <li class="menu-bar bar-7">
  </ul> 
  
  <ul class="nav-links">
    <li class="nav-link link-1"><a href="#" data-section="1">Newt Gingrinch</a></li>
    <li class="nav-link link-2"><a href="#" data-section="2">Kermit</a></li>
    <li class="nav-link link-3"><a href="#" data-section="3">Wembley</a></li>
    <li class="nav-link link-4"><a href="#" data-section="4">Wicket</a></li>
  </ul>
</nav>


<section class="section section-1">
  <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/p417x417/387525_10100309638698616_941084160_n.jpg?oh=8a7ee8d5562b5f4510a85be216310972&oe=54546A40&__gda__=1413419070_a748fe61531fdf47337447c23d3026c9" />
</section>
<section class="section section-2">
  <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xfp1/t31.0-8/337084_10100316582074036_642368602_o.jpg" />
</section>
<section class="section section-3">
  <img src="https://scontent-a-lga.xx.fbcdn.net/hphotos-xaf1/t31.0-8/327767_10100307168933046_985988524_o.jpg" />
</section>
<section class="section section-4">
  <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xfp1/t31.0-8/325009_10100303293723996_660492437_o.jpg" />
</section>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

//colors
$light-grey: #dcdcdc;
$dark-grey: #313131;
$red: #eb2529;

body{
  background-color: $light-grey;
  font-family: "Droid Sans", sans-serif;
}

@keyframes rotate{
 from {
  	@include rotateZ(0deg);
  }

  to{
  	@include rotateZ(360deg);
  }
}


section{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  @include translate3d(-2000px, 0px, 0px);
  @include transition(all 300ms ease-out);
  
  img{
     width: 100%;
  }
  
  &.active{
    @include translate3d(0px, 0px, 0px);
  }
}

.nav-main{
  position: fixed;
  background-color: white;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 100;
  @include transition(all 300ms ease-out);
  @include translate3d(-2000px, 0px, 0px);
  
  &.active{
    @include translate3d(0px, 0px, 0px);
    
    .menu-toggle{
      @include translate3d(0px, 0px, 0px);
      left: 50%;
      margin-left: -15px;

      .bar-1{
        top: -5px;
        @include rotate(90deg);
        opacity: 0;
      }


      .bar-3{
        top: 13px;
        @include rotate(-50deg);
      }


      .bar-6{
        top: 13px;
        @include rotate(50deg);
      }
    }
  }
  
  &.loading{
    .menu-toggle{
        @include translate3d(2000px, 0px, 0px);
        left: 50%;
        margin-left: -15px;
      
			.bar-1{
				opacity: 0.0;
			}

			.bar-3{
				top: 0px;
				width: 35px;
				height: 35px;
				background-color: transparent;
				border: 5px solid $dark-grey;
				opacity: 1.0;
				@include border-radius(50%);
				@include transition(all 100ms ease-out 0s);
			}

			.bar-6{
				opacity: 0.0;
				@include transition(all 0ms ease-out 0s);
			}

			.bar-7{
				top: 20px;
				width: 30px;
				left: 8px;
				opacity: 1.0;
				@include border-radius(2px);
          animation-duration: 1s;
          animation-name: rotate;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
			}
		}
  }
}

.menu-toggle{
	position: fixed;
	height: 50px;
	width: 30px;
	margin: 0 auto;
	top: 30px;
  left: 30px;
  cursor: pointer;
  @include translate3d(2000px, 0px, 0px);
	@include transition(all 300ms ease-out 0ms);

  &:hover{

    .bar-1,{
      top: -1px;
    }

    .bar-3{
      top: 10px;
    }

    .bar-6{
      top: 21px;
    }

    .menu-bar{
      background-color: $red;
    }
  }
}

.menu-bar{
	width: 30px;
	height: 5px;
	left: 0px;
	background-color: $dark-grey;
	position: absolute;
	@include transition(all 300ms ease-out 0ms);
	@include rotate(0deg);
}

.bar-1{
	top: 0px;
	@include transform-origin(0px, 5px);
}

.bar-3{
	top: 8px;
}

.bar-6{
	top: 16px;
}

.bar-7{
	opacity: 0.0;
	top: 8px;
}

.nav-links{
  margin-top: 5rem;
  text-align: center;
  
   .nav-link{
    padding: 1.5rem;
    font-size: 3vw;
    text-transform: uppercase;
    @include transition(all 100ms ease-out);
     
    
    a{
      text-decoration: none;
      color: $dark-grey;
      @include transition(all 100ms ease-out);
    }
    
    &:hover{
      background-color: $red;
      
      a{
        color: white;
      }
    }
  }
}
View Compiled
$('.menu-toggle').on('click', function(){
  console.log('yay');
  $('.nav-main').toggleClass('active');
});

$('.nav-link').children('a').on('click', function(e){
  var section = $(this).data('section');
  $('.section').removeClass('active');
  e.preventDefault();

  $('.nav-main').addClass('loading').removeClass('active');
  //fake loading time
  setTimeout(function(){
    $('.nav-main').removeClass('loading');
    $('.section-' + section).addClass('active');
  }, 2000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js