<body>
<div class="menu-wrapper" id="menu" onclick="addClass('active')">
<i class="fas fa-ellipsis-v"></i>
<div class="menu">
<a href="#" class="item"> HOME </a>
<a href="#" class="item"> ABOUT </a>
<a href="#" class="item"> PORTFOLIO </a>
</div>
</div>
</body>
body {
background: #1465c0;
color: white;
padding: 0;
margin: 0;
position: relative;
height: 100vh;
}
.menu-wrapper {
position: absolute;
clip-path: circle(30px at 32px 34px);
background: white;
padding: 20px 27px;
transition: clip-path 500ms ease-in-out;
left: 30px;
top: 30px;
width: calc(100% - 114px);
height: calc(100% - 100px);
border-radius: 27px;
i {
font-size: 27px;
transition: all 300ms ease-in-out;
color: #1465c0;
}
.menu {
height: 80vh;
width: 100%;
transition: all 500ms ease-in-out;
opacity: 0;
display: flex;
flex-flow: column;
justify-content: flex-start;
.item {
font-size: 27px;
color: #1465c0;
margin: 7px auto;
font-family: Montserrat;
text-decoration: none;
transition: color 200ms ease-in;
&:hover {
color: #1465c0aa;
}
}
}
&.active {
clip-path: circle(100%);
i {
transform: rotate(270deg);
color: #1465c0aa;
}
.menu {
opacity: 1;
display: flex;
}
}
}
View Compiled
function addClass(c) {
console.log("it works, here's your class name: " + c);
document.getElementById("menu").classList.toggle(c);
}
This Pen doesn't use any external JavaScript resources.