.screen
  nav
   .toggle
     span Menu
   .menu-container
     ul.menu.visually-hidden
      li
        a(href="#") uno
      li.has-children
        a(href="#") dos
          span more
        ul.submenu
         li
           a(href="#") one
         li
           a(href="#") two
         li
           a(href="#") three
      li
        a(href="#") tres
      li
        a(href="#") cuatro
      li.has-children
        a(href="#") cinco
          span more
        ul.submenu
          li
            a(href="#") four
          li
            a(href="#") five
View Compiled
@import url(https://fonts.googleapis.com/css?family=Roboto:300);

$bpSmall: 400px;
$colorDark: #313131;
$colorLite: #ededed;
$heightNavbar: 60px;
$heightScreen: 568px;
$widthScreen: 320px;
$widthToggle: 60px;
$heightMenu: $heightScreen - $heightNavbar;

@mixin arrow($s: 4px, $r: -45deg) {
  content: "";
  position: absolute;      
  top: 0; right: 12px; bottom: 0;
  margin: auto;
  padding: 4px;
  width: $s;
  height: $s;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid $colorLite;
  border-right: 2px solid $colorLite;
  transform: rotate($r);
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

.screen {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: $widthScreen;
  height: $heightScreen;
  background-color: $colorLite;
  overflow: hidden;
  @media (max-height: $heightScreen) {
    top: 24px; bottom: auto;
  }
  @media (max-width: $bpSmall) {
    // Mobile dimensions
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}

nav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: $heightNavbar;
  background-color: darken($colorDark, 5%);
  transform: translate3d(0,0,0);
}

.menu-container {
  position: relative;
  transform: translateX(0);
  transition: transform 0.25s ease-out;
  .view-submenu & {
    transform: translateX(-100%);
  }
}

ul {
  position: absolute;
  top: $heightNavbar;
  padding: 6px;
  width: 100%;
  height: $heightMenu;
  color: $colorLite;
  background-color: $colorDark;

  li a {
    opacity: 0;
    display: block;
    padding: 10px 12px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: white;
    border-radius: 3px;
    transform: translateY(12px);
    transition: 
      opacity 0.15s 0.1s ease-out,
      transform 0.15s 0.1s ease-out;
  }
  
  li.has-children {
    
    span {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      margin: auto;
      padding: 12px 16px;
      text-indent: -9999px;
      
      &:after {
        @include arrow(0px);
      }
      
      &:hover {
        &:after {
         border-color: darken($colorLite, 20%);
        }
      }
    } 
  }
}

.menu {
  opacity: 0;
  transition: 
    background-color 0.25s ease-out,
    opacity 0.15s ease-out;
  
  &.is-visible {
    opacity: 1;
    
    li a {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .view-submenu & {
    background-color: lighten($colorDark, 5%);
    
    > li > a {
      opacity: 0;
      transition: opacity 0.15s ease-out;
    }
  }
}

.submenu {
  position: absolute;
  top: 0; left: 100%;
  background-color: $colorDark;
  
  li {
    margin-left: $widthToggle;
  }
}

.hide-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: $widthToggle;
  height: $heightMenu;
  cursor: pointer;
  background-color: $colorDark;
  transition: background-color 0.25s ease-out;
  
  &:before {
    opacity: 0;
    @include arrow(6px, 135deg);
    left: 0; right: -6px;
    transition: opacity 0.1s ease-out;
  }
  
  .view-submenu & {
    background-color: lighten($colorDark, 5%);
    
    &:before {
      opacity: 1;
      transition: opacity 0.15s 0.3s ease-out;
    }
  }
}

.toggle {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0; left: 18px; bottom: 0;
  margin: auto;
  cursor: pointer;
  
  span {
    position: relative;
    align-self: center;
    font-size: 0;
    width: 26px;
    height: 2px;
    background-color: $colorLite;
    border-radius: 100px;
    transition: background-color 0.2s ease-out;
    
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: $colorLite;
      border-radius: 100px;
      transition: transform .2s ease-out;
    }
    
    &:before {
      bottom: calc(100% + 6px);
    }
    
    &:after {
      top: calc(100% + 6px);
    }
  }
  
  .is-visible & {
    span {
      background-color: transparent;
      &:before {
        bottom: auto;
        transform:
          rotate(45deg)
      }
      &:after {
        top: auto;
        transform:
          rotate(-45deg)
      }
    }
  }
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
View Compiled
var nav           = $('nav');
var menu          = $('.menu');
var menuContainer = $('.menu-container');
var subMenu       = $('.submenu');
var toggle        = $('.toggle');
var subToggle     = $('.has-children span');
var back          = '<div class="hide-submenu"></div>';
var subHide       = $(back);

// Toggle menu
toggle.on("click", function() {
  nav.toggleClass('is-visible');
  if(menu.hasClass('visually-hidden')) {
    menu.toggleClass('visually-hidden is-visible')
  } else {
    menu.removeClass('is-visible');
    // Wait for CSS animation
    setTimeout(function() {
      nav.removeClass('view-submenu');
      menu.addClass('visually-hidden');
    }, 200);
  }
});

// Add submenu hide bar
subHide.prependTo(subMenu);
var subHideToggle = $('.hide-submenu');

// Show submenu
subToggle.on("click", function() {
  nav.addClass('view-submenu');
  // Hide all the submenus...
  subMenu.hide();
  // ...except for the one being called
  $(this).parents('li').find('.submenu').show();
});
// Hide submenu
subHideToggle.on("click", function() {
  nav.removeClass('view-submenu');
});

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js