<div class="mt-phone mt-sidemenu" tabindex="1">
  <div class="mt-viewport">
    <ul class="mt-menu">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="mt-cover"></div>
    <ul class="mt-content">
      <li><span class="mt-iconmenu"></span></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<div class="mt-phone mt-bottommenu" tabindex="1">
  <div class="mt-viewport">
    <ul class="mt-menu">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="mt-cover">
      <div class="mt-title"></div>
    </div>
    <ul class="mt-content">
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<div class="mt-phone mt-tilemenu" tabindex="1">
  <div class="mt-viewport">
    <ul class="mt-menu">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="mt-cover"></div>
    <ul class="mt-content">
      <li><span class="mt-iconmenu"></span></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<div class="mt-phone mt-dropmenu" tabindex="1">
  <div class="mt-viewport">
    <ul class="mt-menu">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="mt-content">
      <li><div><span class="mt-iconmenu"></span></div></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
// Vars
$phBord:1px solid #ddd;
$menuBord:1px solid #bbb;
$tbBkg:#888;
$viewW:75px;
$viewH:95px;

// Mixins
@mixin titlebar{
  background:$tbBkg;
  width:$viewW;
  height:18px;
  margin:0;
}

// Keyframes
@keyframes rest {
  to {transform: translateZ(0)} /* Essentially an empty state */
}
@keyframes sideMenu {
  0%,100% {transform: translateX(0)}
  40%,60% {transform: translateX(-100%)}
}
@keyframes sideCover {
  0%,100% {opacity:.5}
  40%,60%{opacity:0}
}
@keyframes sideContent {
  0%,100%{transform: translateX(75%)}
  40%,60% {transform: translateX(0)}
}
@keyframes bottomCover {
  0%,100%{transform: translateY(100%)}
  40%,60% {transform: translateY(0)}
}
@keyframes tileMenuTop{
  0%,100%{transform:translateY(0)}
  10%,90%{transform:translateY(-100%)}
}
@keyframes tileMenu1{
  0%,100%{transform:translate3d(0,0,0)}
  20%,80%{transform:translate3d(-150%,-100%,0)}
}
@keyframes tileMenu2{
  0%,100%{transform:translate3d(0,0,0)}
  20%,80%{transform:translate3d(150%,-100%,0)}
}
@keyframes tileMenu3{
  19%,100%{opacity:1}
  20%,80%{opacity:0}
}
@keyframes tileMenu4{
  0%,100%{transform:translateX(0)}
  20%,80%{transform:translateX(150%)}
}
@keyframes tileMenu5{
  0%,100%{transform:translate3d(0,0,0)}
  20%,80%{transform:translate3d(-150%,100%,0)}
}
@keyframes tileMenu6{
  0%,100%{transform:translate3d(0,0,0)}
  20%,80%{transform:translate3d(150%,100%,0)}
}
@keyframes tileCover{
  0%,100%{background:#ddd}
  20%{background:#fff}
  40%{
    transform:translateY(- $viewH + 20);
    background:$tbBkg;
    opacity:1  
  }
  47%,57%{opacity:0}
  60%{
    opacity:1;
    transform:translateY(- $viewH + 20);
  }
  80%{
    transform:translateY(0);
    background:$tbBkg;
  }
}

@keyframes dropMenu{
  0%,100%{transform:translateY(0%)}
  45%,55%{transform:translateY(-100%)}
}
@keyframes dropContent{
  0%,100%{transform:translateY(calc(100% - 18))}
  45%,55%{transform:translateY(0%)}
}
@keyframes dropIcon{
  0%,100%{
    background:rgba(255,255,255,0);
    transform:translate(50%,100%);
  }
  45%,55%{
    background:rgba(255,255,255,1);
    transform:translate(0%,0%);
  }
}
@keyframes dropIconBkg{
  0%,100%{background:rgba(68,68,68,1);}
  40%,60%{background:rgba(68,68,68,0);}
}
@keyframes dropIconBef{
  0%,100%{
    top:0;
    width:4px;
    transform:rotate(45deg) translateX(-50%);
  }
  45%,55%{
    top:-3px;
    width:8px;
    transform:rotate(0deg) translateX(0);
  }
}
@keyframes dropIconAft{
  0%,100%{
    top:0;
    width:4px;
    transform:rotate(-45deg) translateX(50%);
  }
  45%,55%{
    top:3px;
    width:8px;
    transform:rotate(0deg) translateX(0);
  }
}


// Styles
:root{
  background:#fff;
  padding:20px;
}
.hide{display:none !important}
ul,li{list-style:none}
.mt-phone{
  outline:none;
  &,& *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  display:inline-block;
  margin:0 28px;
  border:$phBord;
  border-bottom-width:3px;
  background:#fff;
  height:$viewH+56;
  width:$viewW+8;
  padding:27px 3px 0;
  border-radius:15px;
  &:before{
    // Phone input :)
    top:145px;
    margin-left:32px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:#eee;
    display:block;
    content:"";
    position:absolute;
  }
}
  .mt-viewport{
    background:#e3e3e3;
    border:$menuBord;
    position:relative;
    overflow:hidden;
    width:$viewW;
    height:$viewH;
    top:22px;
    left:3px;
    >*{
      animation:rest 0 ease; // Empty state for transistion swap
      display:inline-block;
      height:$viewH;
      width:$viewW;
      position:absolute;
      left:0;
    }
    .mt-menu{z-index:3}
  .mt-cover{z-index:2}
  .mt-content{
    width:$viewW;
    overflow:hidden;
    z-index:1;
    li{
      background:#fff;
      width:80%;
      margin:7px 0 0 7px;
      height:30px;
      &:first-child{@include titlebar}
    }
  }
}
.mt-iconmenu{
  top:8px;
  left:4px;
  &,&:before,&:after{
      content:"";
      display:block;
      position:absolute;
      width:8px;
      height:1px;
      background:#ddd;
  }
  &:before{top:-3px}
  &:after{top:3px}
}

.mt-sidemenu,.mt-dropmenu{
  /* Animation */
  &:hover,&:focus{
    .mt-viewport > *{animation:sideMenu .8s ease-in-out 1 both}
    .mt-cover{animation-name:sideCover}
    .mt-content{animation-name:sideContent}
  }
  /* Style */
  .mt-menu{
    width:.75*$viewW;
    background:#ccc;
    list-style:none;
    border-right:$menuBord;
    li{
      border-bottom:$menuBord;
      height:13px;
      &:first-child+*{background:rgba(#fff,.7)}
    }
  }
  .mt-cover{
    background:#000;
    opacity:.5;
  }
  .mt-content{transform: translateX(75%)}
}
.mt-bottommenu{
  // Animation
  &:hover,&:focus{.mt-cover{animation:bottomCover 1s ease-in-out 1 both}}
  // Style
  .mt-menu{
    top:$viewH - 16;
    background:#ccc;
    list-style:none;
    border-top:$menuBord;
    &,li{height:16px}
    li{
      float:left;
      margin:0;
      padding:0;
      width:$viewW / 4;
      border-right:$menuBord;
      &:first-child+*{background:rgba(#fff,.7)}
    }
  }
  .mt-cover{
    background:lighten($tbBkg,20%);
    transform: translateY(100%);
    >*{
      @include titlebar;
      background:darken($tbBkg,20%);
    }
  }
}
.mt-tilemenu{
  /* Animation */
  &:hover,&:focus{
    .mt-viewport > *,.mt-menu > *{animation:nothing 1.1s ease-in-out 1        both}
    .mt-menu li:first-child{animation-name:tileMenuTop}
    .mt-menu li:nth-child(2){animation-name:tileMenu1}
    .mt-menu li:nth-child(3){animation-name:tileMenu2}
    .mt-menu li:nth-child(4){animation-name:tileMenu3}
    .mt-menu li:nth-child(5){animation-name:tileMenu4}
    .mt-menu li:nth-child(6){animation-name:tileMenu5}
    .mt-menu li:nth-child(7){animation-name:tileMenu6}
    .mt-cover{animation-name:tileCover}
  }
  .mt-menu{
    list-style:none;
    li{
      border-radius:2px;
      background:#eee;
      width:43%;
      height:20px;
      margin:8% 3% 0;
      float:left;
      &:first-child{
        @include titlebar;
        border-radius:0;
      }
      &:nth-child(4){
        background:#fff;
      }
    }
  }
  .mt-cover{background:#ddd}
}
.mt-dropmenu{
    /* Animation */
  &:hover,&:focus{
    .mt-viewport *,.mt-iconmenu:before,.mt-iconmenu:after{animation:none .85s ease-in-out 1 both}
    .mt-content{animation-name:dropContent}
    .mt-menu{animation-name:dropMenu}
    ul.mt-content li div{animation-name:dropIconBkg}
    .mt-iconmenu{animation-name:dropIcon}
    .mt-iconmenu:before{animation-name:dropIconBef}
    .mt-iconmenu:after{animation-name:dropIconAft}
  }
  /* Style */
  .mt-menu{
    width:$viewW;
    height:$viewH - 18;
    background:#444;
    list-style:none;
    border-right:$menuBord;
    li{
      border-bottom-color:#555;
      height:13px;
      &:first-child+*{background:rgba(#fff,.3)}
    }
  }
  .mt-iconmenu{
    background:rgba(0,0,0,0);
    transform:translate(50%,100%);
    &:before,&:after{
      top:0;
      width:4px;
    }
    &:before{transform:rotate(45deg) translate(-50%)}
    &:after{transform:rotate(-45deg) translateX(50%)}
  }
  .mt-cover{opacity:0}
  .mt-content{
    transform: translateY(calc(100% - 18px));
    li div{
      background: #444;
      height:18px;
      width:18px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.