<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');
}
});
});
This Pen doesn't use any external CSS resources.