menu-toggle-icon

index.jade

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

menu-toggle-icon.markdown

menu-toggle-icon

Animated menu-icon on toggling.

<div id="menu-toggle-icon">
    <div id="row-0"></div>
    <div id="row-1"></div>
    <div id="row-2"></div>
</div>

A Pen by Tim on CodePen.

License.

script.js

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

scripts

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

style.sass

$line-color: #fafafa
$menu-color: green
  
#menu-toggle-icon
  background-color: rgba($menu-color, .5)
  padding: 15px
  padding-bottom: 10px
  width: 20px
  height: 20px
  cursor: pointer
  position: fixed
  top: 0
  right: 0
  -webkit-tap-highlight-color: transparent
  
  div
    background-color: $line-color
    width: 100%
    height: 1px
    margin-top: 33.333%
    animation-duration: 500ms
    animation-timing-function: ease-in-out
    animation-fill-mode: forwards
  
  
  &.open-lines
    
    #row-1
      opacity: 1
    #row-0
      animation-name: row-0-open
    #row-2
      animation-name: row-2-open
  
  &.close-lines
    
    #row-1
      animation-name: row-1-close
    #row-0
      animation-name: row-0-close
    #row-2
      animation-name: row-2-close
      
/* keyframes open */
@keyframes row-0-open
  0%
    opacity: 0
    top: 66.666%
    margin-top: 66.666%
  50%, 100%
    opacity: 1
    top: 0
    margin-top: 0
  
@keyframes row-2-open
  0%
    opacity: 0
    top: 100%
    margin-top: 100%
  50%, 100%
    top: 33.333%
    margin-top: 33.333%
  70%, 100%
    opacity: 1

/* keyframes close */
@keyframes row-1-close
  0%
    opacity: 1
    top: 0%
    margin-top: 0%
  50%, 100%
    top: 33.333%
    margin-top: 33.333%
    opacity: 0
  
@keyframes row-0-close
  0%
    top: 0
    margin-top: 0
  70%, 100%
    top: 33.333%
    margin-top: 33.333%
  100%
    transform: rotate(45deg)
  
@keyframes row-2-close
  0%
    top: 0%
    margin-top: 0%
  70%, 100%
    top: calc(-33.333% - 2px)
    margin-top: calc(-33.333% - 2px)
  100%
    transform: rotate(-45deg)