<section class="container">
  <div class="wrapper">
    <div class="menu__btn-open">
      <span class="bar1"></span>
      <span class="bar2"></span>
      <span class="bar3"></span>
    </div>
    <h4>Click Here!/Нажми сюда!</h4>
    
    <!-- menu -->
          <div class="menu">
        <div class="menu__btn">
          <div class="menu__btn-close">
      <span class="bar1"></span>
      <span class="bar2"></span>
      <span class="bar3"></span>
    </div>
        </div>
        <div class="menu__list">
          <nav>
            <ul>
              <li class="list__link">
                <a href="#">Главная</a>
              </li>
              <li class="list__link">
                <a href="#">Портфолио</a>
              </li>
              <li class="list__link">
                <a href="#">Услуги</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    <div class="mask"></div>
</div>
</section>

  
/* Font import */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600");

/* General styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

.wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

h4 {
  margin-top: 10px;
}

/* menu styles */
.menu__btn {
  position: absolute;
  top: 20px;
  right: 30px;
  opacity: 0;
  transform: translateY(20px);
}

.menu__btn-open {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #000;
}

.menu__btn-open span {
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
  margin: 4px 0;
  transition: .3s;
}

.menu__btn-open:hover {
  background-color: #000;
}

.menu__btn-open:hover span {
  background-color: #fff;
}

.menu__btn-close {
  cursor: pointer;
  padding: 10px;
}

.menu__btn-close span {
  display: block;
  width: 23px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
}

.menu {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  visibility: hidden;
  z-index: 3;
}

.menu__list .list__link {
  margin-bottom: 54px;
  opacity: 0;
  transform: translateY(20px);
}

.menu__list .list__link a {
  position: relative;
  color: #fff;
  font-size: 68px;
  font-weight: 600;
}

@media screen and (max-width: 500px) {
  .menu__list .list__link a {
    font-size: 30px;
  }
}

.menu__list .list__link a:before {
  content: "";
  position: absolute;
  top: 110%;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: .3s;
}

.menu__list .list__link a:after {
  content: "";
  position: absolute;
  top: 110%;
  right: 0;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: .3s;
}

.menu__list .list__link a:hover:before, .menu__list .list__link a:hover:after {
  width: 50%;
}

/* circle styles */
.mask {
  position: absolute;
  width: 300vh;
  height: 300vh;
  background: #C62828;
  border-radius: 50%;
  transform: scale(0);
  z-index: 2;
}
$('.menu__btn-open').on('click', function (){
  const tl = new TimelineMax();
  tl
  .to('.mask', 0.7, { transform: 'scale(1)' })
  .to('.menu', 0.4, { visibility: 'visible' })
  .to('.menu__btn', 0.3, { y: 0, opacity: 1 })
  // menu links
  .to('.menu__list .list__link:first-child', 0.3, { y: 0, opacity: 1 })
  .to('.menu__list .list__link:nth-child(2)', 0.3, { y: 0, opacity: 1 })
  .to('.menu__list .list__link:last-child', 0.3, { y: 0, opacity: 1 });
});

$('.menu__btn-close').on('click', function (){
  const tl = new TimelineMax();
  tl
  .to('.menu__btn', 0.4, { y: 20, opacity: 0 })
  // menu links
  .to('.menu__list .list__link:last-child', 0.3, { y: 20, opacity: 0 })
  .to('.menu__list .list__link:nth-child(2)', 0.3, { y: 20, opacity: 0 })
  .to('.menu__list .list__link:first-child', 0.3, { y: 20, opacity: 0 })
  .to('.menu', 0.4, { visibility: 'hidden' })
  .to('.mask', 0.38, { transform: 'scale(0)', ease: Power2.easeout });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js