<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);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css
  2. https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,700,800,900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.