• HTML
• CSS
• JS

HTML

<link href="https://font.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

<i class="btn-nav ri-menu-line"></i>

<nav class="nav nav-close">
    <ul class="nav-list">
        <li class="nav-items">Home</li>
        <li class="nav-items">About</li>
        <li class="nav-items">Services</li>
        <li class="nav-items">Contact</li>
    </ul>
</nav>

CSS

*{
    padding:0;
    margin:0;
}

body{
    font-family:'Poppins',sans-serif;
}

.btn-nav{
    display:inline-block;
    width:4rem;
    height:4rem;
    background-color:#30336b;
    position:fixed;
    right:1rem;
    top:1rem;
    border-radius:50%;
    color:#fff;
    font-size:2em;
    text-align:center;
    line-height:4rem;
    box-shadow:0 0 1rem rgba(0,0,0,.2);
    z-index:100;
}

.nav{
    background-color:#130f40;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:0%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.nav-list{
    font-size:1.6em;
    list-style:none;
}

.nav-items{
    color:#45499e;
    padding:.5rem 1rem;
    margin-bottom:1rem;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:all 1s cubic-bezier(.75,-0.35,.11,1.28);
    transform:translateY(-100vh) scale(4);
}

.nav-items::after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#fff;
    transition:all .5s;
    transform:translateX(-102%);
    z-index:-1;
}

.nav-items:hover::after{
    transform:translateX(0);
}

.nav-open{
    transition:height 1s cubic-bezier(0.77,0,0.175,1);
    height:100%;
}

.nav-close{
    transition:height .6s .8s cubic-bezier(0.77,0,0.175,1);
    height:0;
}

JS

const btnNav = document.querySelector('.btn-nav');
const nav = document.querySelector('.nav');
const navItems = document.querySelectorAll('.nav-items');

let navClose = true;

const handlerNavigation = () =>{
    
    let scale = 1, translateY = 0;
    
    if(!navClose){
        scale = 4;
        translateY = -100;
    }
    
    btnNav.classList.toggle('ri-menu-line');
    btnNav.classList.toggle('ri-close-line');
    
    nav.classList.toggle('nav-open');
    nav.classList.toggle('nav-close');
    
    navItems.forEach((item,index)=>{
        item.setAttribute('style',`transition-delay:.${index+1}s;transform:translateY(${translateY}vh) scale(${scale})`);
    });
    
    navClose = !navClose;
}

btnNav.addEventListener('click',handlerNavigation);

/* All credits to: https://www.youtube.com/watch?v=wqBAIP7qFKg */