Fancy Navigation

index.html

.contain
  %section.home.active
    %h1.title Home
  %section.about
    %h1.title About
  %section.work
    %h1.title Work
  %section.contact
    %h1.title Contact
%a.toggle{:href => "#"}
  %span.bar
  %span.bar
  %span.bar

script.js

$('a.toggle').on('click', function(){
  $('section').scrollTop(0);
  $('.contain').toggleClass('active');
  return false;
})

$('section').on('click', function(){
//  $(this).closest('section').prependTo('.contain');
  $('section').removeClass('active');
  $(this).addClass('active');
  $('.contain').removeClass('active');
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$body:    #f9f9f9
$home:    #2196F3
$about:   #FFC107
$work:    #4CAF50
$contact: #F44336

body
  font-weight: 300
  font-family: 'Raleway', sans-serif
  background: #fff
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 80%, rgba(0,0,0,0.15) 100%)
  overflow: hidden
  transform-style: preserve-3d
p
  padding: 0 100px
  color: #fff
  font-size: 18px
  line-height: 1.5
  font-family: 'Merriweather', serif
a.toggle
  display: block
  position: fixed
  top: 20px
  left: 25px
  z-index: 1000
  transform: rotate(0deg)
  transition: all 500ms
  .bar
    display: block
    width: 35px
    height: 4px
    margin: 6px auto
    background: rgba(0,0,0,0.25)
    transition: all 500ms
  &:hover
    .bar
      background: white
.contain
  width: 100%
  height: 100vh
  transition: all 500ms
  transform-style: preserve-3d
  section
    position: absolute
    top: 100vh
    width: 100%
    height: 100vh
    overflow: scroll
    transition: top 500ms
    transform-style: preserve-3d
    &.active
      top: 0
    &.home
      background: $home
    &.about
      background: $about
    &.work
      background: $work
    &.contact
      background: $contact
  h1
    margin: 0
    font-size: 64px
    transform: translate(0, 40vh)
    text-align: center
    color: rgba(255,255,255,0.85)
    transition: transform 500ms
    transform-style: preserve-3d

.contain.active
  transform: scale(0.65) translateY(-18%)
  transition: all 500ms
  transform-style: preserve-3d
  + a.toggle
    top: 30px
    left: 20px
    transform: rotate(225deg)
    transition: all 500ms
    transform-origin: center center
    .bar
      background: #646464
      transition: all 500ms
      &:nth-child(2)
        opacity: 0
        transition: opacity 0s
      &:nth-child(3)
        margin-top: -20px
        transform: rotate(90deg)
  section
    cursor: pointer
    overflow: hidden
    opacity: 1
    box-shadow: 0 0 40px rgba(0,0,0,0.25)
    transform-style: preserve-3d 
  h1
    transform: scale(0.5)
    transform-style: preserve-3d
    //&:hover
      //background: rgab(0,0,0,0.25)


@for $i from 1 through 4
  .contain section:nth-child(#{$i})
    z-index: 100 - $i
  .contain.active section:nth-child(#{$i})
    top: 48vh + (-12vh * $i)
    &:hover
      top: 47vh + (-12vh * $i)

styles

<link href="http://fonts.googleapis.com/css?family=Raleway:600,400,200,300" rel="stylesheet" />