<div class="window-container valign">
  <div id="toggle" class="button_container">
    <span class="top"></span>
    <span class="top2"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
    <span class="bottom2"></span>
  </div>
  <span class="helper-text">Click the three dots</span>
  <div id="overlay" class="overlay">
    <div class="overlay-menu">
      <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
      </ul>
    </div>
  </div>
</div>
/*Styles only for yellow window box*/
@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  background: #222;
  font-family: 'Lato', sans-serif;
}

.window-container {
  width: 400px;
  display: block;
  height: 400px;
  background: #ffcb08;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 36px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 36px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 36px 1px rgba(0, 0, 0, 0.75);
}

.window-container .helper-text{
  display: block;
    padding: 15px 55px;
}


/*Vertical align helper class*/

.valign {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/*Styles for Dot Menu*/

.button_container {
  position: fixed;
  top: 14px;
  left: 15px;
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 9999;
  transition: opacity .25s ease;
}

.button_container span {
  background: #121111;
  border: none;
  height: 5px;
  width: 5px;
  position: absolute;
  top: 0;
  left: 10px;
  transition: all .35s ease;
  cursor: pointer;
  border-radius: 5px;
}

.button_container:hover {
  opacity: .7;
}

.button_container span:nth-of-type(3) {
  top: 9px;
}

.button_container span:nth-of-type(4),
.button_container span:nth-of-type(5) {
  top: 18px;
}

.button_container.active .top,
.button_container.active .bottom {
  transform: translateX(-10px);
  background: #ffffff;
}

.button_container.active .top2,
.button_container.active .bottom2 {
  transform: translateX(10px);
  background: #ffffff;
}

.button_container.active .middle {
  background: #ffffff;
}


/*Overlay styles, after click on menu icon*/

.overlay {
  position: fixed;
  background: #121111;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  z-index: 8888;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}

.overlay.open {
  opacity: .95;
  visibility: visible;
  height: 100%;
}

.overlay .overlay-menu {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.overlay .overlay-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.overlay li {
  opacity: 0;
}

.overlay.open li {
  animation: fadein 0.5s ease forwards;
  animation-delay: 0.35s;
  padding: 3px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
$(document).ready(function() {

  $('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay').toggleClass('open');
  });
  
  // hide menu on ESC keyboard hit
  $(document).on('keydown', function(e) {
    if (e.keyCode === 27) { // ESC
      $("#toggle").removeClass('active');
      $('#overlay').removeClass('open');
    }
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js