menu-toggle

index.jade

#menu-toggle-icon
  each _, i in Array(3)
    div(id='row-'+i)
#menu
  div
    a Education
  div
    a Portfolio
  div
    a Info

menu-toggle.markdown

menu-toggle

A Pen by Tim on CodePen.

License.

script.js

$( "#menu-toggle-icon" ).addClass("open-lines");
$( "#menu-toggle-icon, #menu" ).click(function() {
  $( "#menu" ).toggleClass("visable");
  $( "#menu-toggle-icon" ).toggleClass("close-lines");
  $( "#menu-toggle-icon" ).toggleClass("open-lines");
  $( "#menu-toggle-icon" ).toggleClass("visable");
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

$menu-items: 3
$menu-color: #000
$menu-item-hover-color: $menu-color
$line-color: white
$icon-color: rgba(black, .5)
$icon-color-visable: white
$toggle-duration: 500ms

*
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

body
  background: url("http://img03.deviantart.net/a335/i/2010/128/a/f/magical_forest_by_siilikas9.png")
  #background-size: 185%
  #background-position: 35% 10%

#menu-toggle-icon
  background-color: $icon-color
  z-index: 10
  
  &.visable
    #background-color: $icon-color-visable

#menu
  font-family: Copperplate,"Copperplate Gothic Light",fantasy
  font-variant: small-caps
  text-align: right
  font-weight: 400
  letter-spacing: 5px
  color: lighten($menu-color, 100%)
  position: fixed
  margin: 0
  padding-top: 50px
  top: 0
  right: 0
  width: 0%
  height: 0%
  
  &.visable
    width: 100%
    height: 100%
    background-color: rgba($menu-color, .5)
  
  &.visable div:after
    margin-right: -15px
  
  div
    padding: 10px 0px 10px 20px
    cursor: pointer

    &:after
      font-family: Verdana
      letter-spacing: 0px
      width: 20px
      text-align: center
      padding-left: 15px
      padding-right: 15px
      margin-right: 15px
      content: "__"
      float: right
      margin-top: -6px
    
    &:hover
      background-color: rgba($menu-item-hover-color, .5)
   
  @for $i from 1 through $menu-items
    &.visable > div:nth-child(#{$i})
      animation:
        name: open
        duration: $toggle-duration * ($i * .5)
        timing-function: ease-in-out
        fill-mode: forwards
     
  @for $i from 1 through $menu-items
    & > div:nth-child(#{$menu-items + 1 - $i})
      animation:
        name: close
        duration: $toggle-duration * ($i * .5)
        timing-function: ease-in-out
        fill-mode: forwards
        
  
@keyframes open
  0%
    transform: rotateX(90deg)
    opacity: 0
  100%
    margin-right: 15px
    transform: rotateX(0deg)
    opacity: 1

@keyframes close
  0%
    transform: rotateX(0deg)
    opacity: 1
  100%
    transform: rotateX(90deg)
    opacity: 0

styles

<link href="https://codepen.io/litmind/pen/wzvJmZ" rel="stylesheet" />