• HTML
• CSS
• JS

HTML

<div class="navigation">
    <div class="toggle"><span></span></div>
    <ul>
        <li style="--i:0;"><a href="#">Home</a></li>
        <li style="--i:1;"><a href="#">About</a></li>
        <li style="--i:2;"><a href="#">Services</a></li>
        <li style="--i:3;"><a href="#">Work</a></li>
        <li style="--i:4;"><a href="#">Team</a></li>
        <li style="--i:5;"><a href="#">Contact</a></li>
    </ul>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,700,800,900&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body
{
    min-height:100vh;
    background:linear-gradient(45deg,#ff216d,#2196f3);
}
.navigation
{
    position:fixed;
    top:20px;
    right:20px;
    height:20px;
    width:250px;
    z-index:100;
}
.toggle
{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background:#fff;
    cursor:pointer;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    color:#ff216d;
    padding:5px 20px;
}
.toggle::before
{
    content:'Menu';
    margin-right:10px;
}
.toggle.active::before
{
    content:'Close';
}
.toggle span
{
    position:relative;
    width:20px;
    height:50px;
}
.toggle span::before
{
    content:'';
    position:absolute;
    top:20px;
    left:0;
    width:100%;
    height:2px;
    background:#ff216d;
    transition:0.5s;
}
.toggle span::after
{
    content:'';
    position:absolute;
    bottom:20px;
    left:0;
    width:100%;
    height:2px;
    background:#ff216d;
    transition:0.5s;
}
.toggle.active span::before
{
    transform:rotate(225deg);
    top:24px;
}
.toggle.active span::after
{
    transform:rotate(135deg);
    bottom:24px;
}
ul
{
    position:relative;
    list-style:none;
    display:flex;
    flex-direction:column;
}
ul li
{
    position:relative;
    list-style:none;
    transition:0.5s;
    visibility:hidden;
    opacity:0;
    transform:translateX(-250px);
    transition-delay:calc(0.1s * var(--i));
}
.navigation.active ul li
{
    visibility:visible;
    opacity:1;
    transform:translateX(0px);
}
ul li a
{
    position:relative;
    text-decoration:none;
    display:block;
    padding:10px 20px;
    height:50px;
    background:#fff;
    color:#333;
}
ul li a:hover
{
    background:#f6f6f6;
    color:#ff216d;
    transition:0s;
}

JS

let navigation = document.querySelector('.navigation');
document.querySelector('.toggle').onclick = function(){
    this.classList.toggle('active');
    navigation.classList.toggle('active');
}

// All the credits: https://www.youtube.com/watch?v=yGkw7Lyaky8