<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Drop Menu</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<p class="commander">Click the Button!</p>
<div class="wrapper">
<div class="menu">
<ul class="menu__list">
<li class="menu__list__item"><a href="#">Home</a></li>
<li class="menu__list__item"><a href="#">Portfolio</a></li>
<li class="menu__list__item"><a href="#">About</a></li>
</ul>
</div>
<div class="button">
<span class="button__line"></span>
<span class="button__line"></span>
<span class="button__line"></span>
</div>
</div>
</body>
</html>// vars and keyframes
$delay: .5s;
$menu-items: 3;
@keyframes drop {
from {
top: 0px;
}
70% {
top: 165px;
animation-timing-function: ease-in;
}
to {
top: 150px;
animation-timing-function: ease-out;
}
}
// Dat CSS
html {
width: 100% ;
height: 100% ;
background: radial-gradient(center, #FFF 0%, #CCC 70%, #CCC 100%) no-repeat;
}
body {
display: flex;
flex-wrap: wrap;
}
.commander {
width: 100%;
color: #2E3F47;
font-size: 1.5em;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin: 10px auto;
}
.button {
display: flex;
position: absolute;
top: 0;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #2E3F47;
z-index: 2;
}
.button__line {
background: #ccc;
width: 90px;
height: 15px;
&:not(:first-child) {
margin-top: 15px;
}
}
.menu {
width: 100%;
}
.menu__list {
text-align: center;
width: 100%;
padding-left: 0;
}
.menu__list__item {
position: relative;
list-style: none;
padding-bottom: 15px;
top: 0px;
}
.menu__list__item a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 1.5em;
font-family: 'Open Sans', sans-serif;
}
.menu__list__item {
opacity: 0;
}
.menu__list--animate .menu__list__item {
animation: drop 0.9s;
animation-fill-mode: forwards;
opacity: 1;
@for $i from 2 through $menu-items {
&:nth-child(#{$i}) {
animation-delay: $delay * ($i - 1);
}
}
}// function to trigger animation
document.querySelector('.button').addEventListener('click', () => {
document.querySelector('.menu__list')
.classList.toggle('menu__list--animate');
});
External CSS
This Pen doesn't use any external CSS resources.