<div class="container">
<input type="checkbox" id="toggle" checked/>
<label class="button" for="toggle"></label>
<nav class="nav">
<ul>
<a href="http://sashatran.com" target="_blank">About</a>
<a href="https://codepen.io/sashatran/pens/public/" target="_blank">Home</a>
<a href="https://www.linkedin.com/in/sasha-tran-23498989/" target="_blank">Hire Me</a>
<a href="https://www.youtube.com/channel/UCCATAa8MWoBuH-sR_Jlx29A" target="_blank">Subscribe</a>
</ul>
</nav>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto");
$purple: #8974FB;
$light-purple: #C784DD;
body {
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#toggle {
-webkit-appearance: none;
}
.button {
position: absolute;
z-index: 999;
width: 43px;
height: 43px;
background: $purple;
border-radius: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
top: -12px;
&:before {
position: absolute;
content: "";
width: 20px;
height: 2px;
background: #fff;
transform: rotate(90deg);
transition: all 0.4s ease;
}
&:after {
position: absolute;
content: "";
width: 20px;
height: 2px;
background: #fff;
transition: all 0.4s ease;
}
}
.nav {
opacity: 0;
transition: all 0.4s ease-in-out;
background: #fff;
width: 100%;
border-radius: 5px;
transform: translateY(0%);
box-shadow: 2px 3px 10px 0 rgba(81, 81, 81, 0.1);
border: 1px solid #e4e4e4;
padding: 10px;
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
a {
text-align: center;
margin: 20px 0;
color: $purple;
text-decoration: none;
font-family: "Roboto", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
&:hover {
color: $light-purple;
}
}
}
#toggle:checked ~ .nav {
opacity: 1;
transform: translateY(10%);
}
#toggle:checked ~ .button:before {
transform: rotate(225deg);
}
#toggle:checked ~ .button:after {
transform: rotate(135deg);
}
@media (max-width: 640px) {
.container {
width: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.