<div class="device">
    <div class="screen">
      <div class="menu">
        <ul>
          <li class="lock"><a href="">Lock</a></li>
          <li class="share"><a href="">Share</a></li>
          <li class="download"><a href="">Download</a></li>
        </ul>
      </div>
      <div class="toggle">
        <div class="x"></div>
        <div class="y"></div>
      </div>
      <div class="content"></div>
    </div>
  </div>
  <div class="circle"></div>
  <script src="https://code.jquery.com/jquery-latest.min.js">

/*  Reset & General */
* { margin: 0px; padding: 0px; }
body {
  background: #2e2c35;
  width: 100%; height: 100%;
}

a.codepen {
  display: block;
  height: 43px; width: 150px;
  background: url('http://creativeda.sh/sandbox/bounce_menu/img/codepen.png');
  text-indent: -9999px; font-size: 0px;
  position: absolute;
  top: 50%; left: 50%;
  z-index: 200;
  margin: 420px 0px 0px -72px;
}

div.circle {
  height: 77px; width: 77px;
  background: url('http://creativeda.sh/sandbox/bounce_menu/img/circle.png');
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1000;
  margin: 164px 0px 0px -168px; 
  pointer-events: none;
  animation: pulse 5s infinite;
  -webkit-animation: pulse 1.5s infinite; 
  opacity: 0;
}
  @keyframes pulse {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes pulse {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
  }


/*  Device & Screen */
div.device {
  height: 798px; width: 378px;
  width: 440px; height: 807px;
  background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  position: absolute; margin: auto;
  top: 0px; bottom: 100px; left: 0px; right: 0px;
}
div.screen { 
  height: 568px; width: 320px;
  position: absolute;
  top: 119px; left: 60px;
  overflow: hidden;
}
div.content {
  height: 568px; width: 320px;
  background: #375585;
  position: absolute;
  top: 0px; left: 0px;
  z-index: 300;
  -webkit-transition: all 250ms ease;
     -moz-transition: all 250ms ease;
      -ms-transition: all 250ms ease;
       -o-transition: all 250ms ease;
          transition: all 250ms ease;
}
div.content.bounce { 
  -webkit-transform: translate3d(70px, -65px, 0px); 
     -moz-transform: translate3d(70px, -65px, 0px); 
       -o-transform: translate3d(70px, -65px, 0px); 
          transform: translate3d(70px, -65px, 0px); 
}
div.content.open { 
  -webkit-transform: translate3d(60px, -55px, 0px); 
     -moz-transform: translate3d(60px, -55px, 0px); 
       -o-transform: translate3d(60px, -55px, 0px); 
          transform: translate3d(60px, -55px, 0px); 
}


/*  Toggle & Menu */
div.toggle {
  height: 30px; width: 40px;
  position: absolute;
  bottom: 15px; left: 10px;
  z-index: 500;
  cursor: pointer;
}
  div.x,
  div.y {
    position: absolute; margin: auto;
    top: 0px; bottom: 0px;
    left: 0px; right: 0px;
    background: #fff;
    -webkit-transition: all 200ms ease-out;
       -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
         -o-transition: all 200ms ease-out;
            transition: all 200ms ease-out;
  }
  div.x { height: 4px; width: 30px; }
  div.y { height: 30px; width: 4px; }
  div.x.stretch { width: 40px; }
  div.x.shrink { width: 15px; }
  div.y.minus { height: 0px; }

div.menu {
  background: #222;
  height: 568px; width: 320px;
  position: absolute;
  top: 0px; left: 0px;
  z-index: 100;
}
  div.menu ul {
    list-style: none;
    padding: 0px; margin: 0px;
    height: 150px;
    width: 35px;
    position: absolute;
    bottom: 60px; left: 11px;
  }
  div.menu ul li {
    margin-top: 15px;
  }
  div.menu ul li a {
    display: block;
    height: 31px; width: 31px;
    text-indent: -9999px; font-size: 0px;
    background: #375585 center center; 
  }
  div.menu ul li.animate a {
    -webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
         -o-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
  }
  div.menu ul li.lock a { 
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_lock.png'); 
    -webkit-transform: translate3d(-50px, -30px, 0px);
       -moz-transform: translate3d(-50px, -30px, 0px);
         -o-transform: translate3d(-50px, -30px, 0px);
            transform: translate3d(-50px, -30px, 0px);
  }
  div.menu ul li.share a { 
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_share.png'); 
    -webkit-transform: translate3d(-50px, 0px, 0px);
       -moz-transform: translate3d(-50px, 0px, 0px);
         -o-transform: translate3d(-50px, 0px, 0px);
            transform: translate3d(-50px, 0px, 0px);
  }
  div.menu ul li.download a { 
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_download.png'); 
    -webkit-transform: translate3d(-50px, 30px, 0px);
       -moz-transform: translate3d(-50px, 30px, 0px);
         -o-transform: translate3d(-50px, 30px, 0px);
            transform: translate3d(-50px, 30px, 0px);
  }
  div.menu ul li.color a {  background-color: #fff; }
  div.menu ul li.move a { 
    -webkit-transform: translate3d(0px, 0px, 0px); 
       -moz-transform: translate3d(0px, 0px, 0px); 
         -o-transform: translate3d(0px, 0px, 0px); 
            transform: translate3d(0px, 0px, 0px); 
  }

  
  /*  Define Click Event for Mobile */
  if( 'ontouchstart' in window ){ var click = 'touchstart'; }
  else { var click = 'click'; }


  /*  Click menu toggle */
  $('div.toggle').on(click, function(){
    if( flag ){
      if( !$(this).hasClass('minus') ){ openMenu(); } 
      else { closeMenu(); }
    }
  });
  
  
  /*  Click menu icons */
  $('div.menu ul li a').on(click, function(e){
    e.preventDefault();
    closeMenu();
  });
  
  
  /*  Open/ Close Menu Functions */
  var flag = true; // Prevent menu change while animating
  function openMenu(){
    flag = false;
    
    // Remove circle
    $('div.circle').remove();
          
    // Update toggle
    $('div.toggle').addClass('minus');
    $('div.y').addClass('minus');
    setTimeout(function(){ $('div.x').addClass('stretch'); }, 100);
    setTimeout(function(){ $('div.x').removeClass('stretch'); }, 300);
    
    // Move content
    $('div.content').addClass('bounce');
    setTimeout(function(){ $('div.content').removeClass('bounce').addClass('open'); }, 250);
    
    // Animate menu icons
    $('div.menu ul li').addClass('animate');
    $('div.menu ul li').addClass('move');
    setTimeout(function(){ $('div.menu ul li').addClass('color'); }, 200);
    setTimeout(function(){ flag = true; }, 400);
  }
  
  function closeMenu(){
    flag = false;
        
    // Update toggle
    $('div.toggle').removeClass('minus');
    $('div.y').removeClass('minus');
    $('div.x').addClass('shrink');
    setTimeout(function(){ $('div.x').removeClass('shrink'); }, 200);
    
    // Move content
    $('div.content').removeClass('open');
    
    // Reset menu icons
    setTimeout(function(){          
      $('div.menu ul li').removeClass('animate');
      $('div.menu ul li').removeClass('color move');
      flag = true;
    }, 300);
  }