CodePen Embed - Mobile Menu Style

.wrapper
  .app
    .nav
      .nav-bar
        .logo
        .nav-btn
          .btn-bar.menu
          .btn-bar.menu
          .btn-bar.menu
          .btn-bar.close
          .btn-bar.close
      .nav-content
        .background
          .portion
          .portion
          .portion

.wrapper
  .app
    .nav
      .nav-bar
        .logo
        .nav-btn
          .btn-bar.menu
          .btn-bar.menu
          .btn-bar.menu
          .btn-bar.close
          .btn-bar.close
      .nav-content
        .background
          .portion
          .portion
          .portion

View Compiled

// root settings / variables
$app-hide-overflow: true; // set to false to see everything that's going on

body,
html {
  margin:  0;
  padding: 0;
  width:  100%;
  height: 100%;
}

body {
  font-family:     sans-serif;
  display:         flex;
  flex-flow:       row wrap;
  align-items:     center;
  justify-content: space-around;
  
  font-size: 12px;
  background: linear-gradient(195deg, #ae6be0, #ddd);
}

$app-width: 200px;
$app-aspect: 0.562;

.wrapper {
  position:  relative;
  flex:      0 0 auto;
  padding:    ($app-width / $app-aspect * 0.15) ($app-width * 0.08);
  background: #222;
  border-radius: $app-width / 10;
  box-shadow: 0 7px 0 0 #555;
  
  &:before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    background: #777;
    z-index: 1;
    top:    6%;
    left:  50%;
    width: 30%;
    height: 1%;
    border-radius: 500px;
  }
  
  &:after {
    content: '';
    position:  absolute;
    transform: translate(-50%, 50%);
    bottom:  6%;
    left:   50%;
    width:  10%;
    height:  5%;
    border-radius: 500px;
    border: ($app-width / 50) solid #666;
  }
}

.app {
  $app-height: $app-width / $app-aspect;
  $app-border-width-v: $app-height / 6;
  $app-border-width-h: $app-width  / 11;
  $app-border-width: $app-border-width-v $app-border-width-h;
  
  position:   relative;
  background: #fff;
  flex:       0 0 auto;
  width:      $app-width;
  height:     $app-height;
  margin:     5px;
  
  @if $app-hide-overflow { overflow: hidden; }
}

.nav {
  $btn-bar-width:   1.34em;
  $btn-bar-height:  3px;
  $btn-bar-spacing: 3px;
  
  .nav-bar {
    display:   flex;
    flex-flow: row;
    position:  relative;
    z-index:   3;
  }
  
  .logo {
    flex: 1 1 100%;
  }
  
  .nav-btn {
    display:     flex;
    flex-flow:   column;
    align-items: center;
    position:    relative;
    cursor:      pointer;
    
    flex:    0;
    padding: 5px;
  }
  
  .nav-btn .btn-bar {   
    position: relative;
    
    width:         $btn-bar-width;
    height:        $btn-bar-height;
    border-radius: 5px;
    background:    #444;
    
    &.menu:not(:first-child) { 
      margin-top: $btn-bar-spacing; 
    }
    
    &.close {
      transform-origin: center center;
      position:         absolute;
      
      margin-top: -$btn-bar-height / 2;
      opacity:    0;
      top:        50%;
    }
  }

  .nav-content {
    position:   absolute;

    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    z-index: -1;
    
    .background { 
      position:    absolute;
      display:     flex;
      flex-flow:   column;
      align-items: stretch;

      top:     0;
      left:    0;
      right:   0;
      bottom: -2px;
    }

    .portion {
      background: #c796ec;
      
      &:not(:first-child) { margin-top: -1px; }
    }
  }

  &.open {
    .nav-bar .nav-btn .btn-bar.menu  { opacity: 0; }
    .nav-bar .nav-btn .btn-bar.close { opacity: 1; }
  }
}


.wrapper:nth-child(1) .app .nav {

  /*///////////////////////////////////
  // Region: Nav Animations 
  ///////////////////////////////////*/

  $menu-bar-anim-time:   0.3s;
  $menu-bar-anim-offset: 400%;
  
  $close-bar-anim-time:   0.2s;
  $close-bar-anim-offset: 250%;
  
  $background-anim-time: $close-bar-anim-time;
  
  /*///////////////////////////////////
  // Region: Initial (Closed) States 
  ///////////////////////////////////*/

  .btn-bar.menu:nth-child(even) { width: 1.8em; }

  .btn-bar.close {
    &:not(:last-child) { transform: rotate( 45deg) translateX(-$close-bar-anim-offset); }
    &:last-child       { transform: rotate(-45deg) translateX( $close-bar-anim-offset); }
  }

  .nav-content .background .portion { 
    flex: 1 1 100%; 

    &:nth-child(odd)  { transform: translateX(-100%); }
    &:nth-child(even) { transform: translateX( 100%); }
  }

  /*///////////////////////////////////
  // Region: Expanded (Open) States 
  ///////////////////////////////////*/

  &.open {
    .nav-btn .btn-bar.menu {
      &:nth-child(odd)  { transform: translateX(-$menu-bar-anim-offset); }
      &:nth-child(even) { transform: translateX( $menu-bar-anim-offset / 2); }
    }

    .nav-btn .btn-bar.close {
      &:not(:last-child) { transform: rotate( 45deg); }
      &:last-child       { transform: rotate(-45deg); }
    }

    .nav-content { 
      z-index: 1; 

      .background .portion {
        transform: translateX(0%);
      }
    }
  }

  /*///////////////////////////////////
  // Region: Transition -> Menu Opening   
  ///////////////////////////////////*/

  &.open .btn-bar.menu {

    // transition when menu is opening
    transition: 
        transform $menu-bar-anim-time ease-in-out, 
        opacity ($menu-bar-anim-time / 2) ease-in-out ($menu-bar-anim-time / 2);
  }

  &.open .btn-bar.close {

    // transition when menu is opening
    transition: 
        transform $close-bar-anim-time ease-in-out $menu-bar-anim-time, 
        opacity ($close-bar-anim-time / 4) ease-in-out $menu-bar-anim-time;  
  }

  &.open .nav-content {

    // transition when menu is opening
    transition: z-index 0.01s ease-in-out $menu-bar-anim-time;
  }

  &.open .nav-content .background .portion {

    // transition when menu is opening
    transition: transform $background-anim-time ease-in-out $menu-bar-anim-time;
  }

  /*///////////////////////////////////
  // Region: Transition -> Menu Closing   
  ///////////////////////////////////*/

  .btn-bar.menu {

    // transition when menu is closing
    transition: 
        transform $menu-bar-anim-time ease-in-out $close-bar-anim-time, 
        opacity ($menu-bar-anim-time / 2) ease-in-out $close-bar-anim-time;
  }

  .btn-bar.close {

    // transition when menu is closing
    transition: 
        transform $close-bar-anim-time ease-in-out, 
        opacity ($close-bar-anim-time / 4) ease-in-out $close-bar-anim-time;
  }

  .nav-content {

    // transition when menu is closing
    transition: z-index 0.01s ease-in-out $background-anim-time;
  }

  .nav-content .background .portion {

    // transition when menu is closing
    transition: transform $background-anim-time ease-in-out;
  } 
}


.wrapper:nth-child(2) .app .nav {

  /*///////////////////////////////////
  // Region: Nav Animations 
  ///////////////////////////////////*/

  $menu-bar-anim-time:   0.3s;
  $menu-bar-anim-offset: 400%;
  
  $close-bar-anim-time:   0.5s;
  $close-bar-anim-offset: 250%;
  
  $background-anim-time: $close-bar-anim-time;
  
  /*///////////////////////////////////
  // Region: Initial (Closed) States 
  ///////////////////////////////////*/
  
  .nav-btn { align-items: flex-end; }
  
  .btn-bar.menu {
    &:nth-child(1) { 
      transform-origin: top right;
      transform: rotate(-45deg);
      width: 1.8em;
    }
    
    &:nth-child(2) {
      transform: rotate(-45deg) translate(0, -4px);
    }
    
    &:nth-child(3) { 
      transform: rotate(-45deg) translate(0, 1px);
      width: 0.8em;
    }
  }
  
  .btn-bar.close {
    &:not(:last-child) { transform: rotate( 45deg) translateX(-$close-bar-anim-offset); }
    &:last-child       { transform: rotate(-45deg) translateX( $close-bar-anim-offset); }
  }
  
  .nav-content .background {
    transform-origin: center;
    transform: rotate(-45deg) scale(2, 1.2);
  }
  
  .nav-content .background .portion { 
    flex: 1 1 100%; 

    &:nth-child(odd)  { transform: translateX(-100%); }
    &:nth-child(even) { transform: translateX( 100%); }
  }
  
  /*///////////////////////////////////
  // Region: Expanded (Open) States 
  ///////////////////////////////////*/

  &.open {
    .nav-btn .btn-bar:nth-child(1) { 
      transform: rotate(-45deg) translateX(-$menu-bar-anim-offset);
    }
    
    .nav-btn .btn-bar:nth-child(2) {
      transform: rotate(-45deg) translate(0, -4px) translateX( $menu-bar-anim-offset / 2);
    }
    
    .nav-btn .btn-bar:nth-child(3) { 
      transform: rotate(-45deg) translate(0, 1px) translateX( $menu-bar-anim-offset / 2);
    }
    
    .nav-btn .btn-bar.close {
      &:not(:last-child) { transform: rotate( 45deg); }
      &:last-child       { transform: rotate(-45deg); }
    }

    .nav-content { 
      z-index: 1; 

      .background .portion {
        transform: translateX(0%);
      }
    }
  }
  
  /*///////////////////////////////////
  // Region: Transition -> Menu Opening   
  ///////////////////////////////////*/

  &.open .btn-bar.menu {

    // transition when menu is opening
    transition: 
        transform $menu-bar-anim-time ease-in-out, 
        opacity ($menu-bar-anim-time / 2) ease-in-out ($menu-bar-anim-time / 2);
  }
  
  &.open .btn-bar.close {

    // transition when menu is opening
    transition: 
        transform $close-bar-anim-time ease-in-out $menu-bar-anim-time, 
        opacity ($close-bar-anim-time / 4) ease-in-out $menu-bar-anim-time;  
  }

  &.open .nav-content {

    // transition when menu is opening
    transition: z-index 0.01s ease-in-out $menu-bar-anim-time;
  }

  &.open .nav-content .background .portion {

    // transition when menu is opening
    transition: transform $background-anim-time ease-in-out $menu-bar-anim-time;
  }
  
  /*///////////////////////////////////
  // Region: Transition -> Menu Closing   
  ///////////////////////////////////*/

  .btn-bar.menu {

    // transition when menu is closing
    transition: 
        transform $menu-bar-anim-time ease-in-out $close-bar-anim-time, 
        opacity ($menu-bar-anim-time / 2) ease-in-out $close-bar-anim-time;
  }

  .btn-bar.close {

    // transition when menu is closing
    transition: 
        transform $close-bar-anim-time ease-in-out, 
        opacity ($close-bar-anim-time / 4) ease-in-out $close-bar-anim-time;
  }

  .nav-content {

    // transition when menu is closing
    transition: z-index 0.01s ease-in-out $background-anim-time;
  }

  .nav-content .background .portion {

    // transition when menu is closing
    transition: transform $background-anim-time ease-in-out;
  } 
}

View Compiled

(function (cb) {
 
  // browser event has already occurred.
  if (document.readyState === "complete") {
    return setTimeout(cb);
  }

  // Mozilla, Opera and webkit style
  if (window.addEventListener) {
    return window.addEventListener("load", cb, false);
  }

  // If IE event model is used
  if (window.attachEvent) {
    return window.attachEvent("onload", cb);
  }
 
})(function () {
  
  document.querySelectorAll('.nav-btn').forEach(function (el) {
    el.addEventListener('click', function () {
      var nav    = this.parentElement.parentElement,
          _class = 'open';
      
        nav.classList.contains(_class)
      ? nav.classList.remove  (_class)
      : nav.classList.add     (_class)
    });
  });
  
});

This Pen is owned by Raiden Kaneda on CodePen.

See more by @Kaneda9 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.