• HTML
• CSS
• JS

HTML

<div class="frame">
    <div class="menu-icon">
        <div class="line-top"></div>
        <div class="line-bottom"></div>
    </div>
    <div class="menu">
        <ul>
            <li><span>Home</span></li>
            <li><span>Work</span></li>
            <li><span>Life</span></li>
            <li><span>Spirit</span></li>
        </ul>
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#5dade2;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif; 
}
.frame{
   position:relative;
}
.menu-icon{
    position:absolute;
    left:75px;
    cursor:pointer;
}
.menu-icon .line-top ,.line-bottom{
    width:50px;
    height:4px;
    background:#fff;
}
.menu-icon .line-bottom{
    margin-top:12px;
}

.menu-icon.active{
    height:0px;
}
.menu-icon.active .line-top{

    animation: line-top-open 1s ease both;
}

.menu-icon.active .line-bottom{
    animation: line-bottom-open 1s ease both;
}

.menu-icon.paused .line-top{
    animation: line-top-close 1s ease both;
}

.menu-icon.paused .line-bottom{
    animation: line-bottom-close 1s ease both;
}
.menu{
    pointer-events: none;
}
.menu ul{
    display: flex;
    gap:10px;
    list-style: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    
    opacity:0;
}
.menu.active ul{
    opacity: 1;
    pointer-events:all;
    transition: all .5s ease-in-out .5s;
}
.menu ul li{
    list-style:none;
    cursor:pointer;
}
.menu ul li:hover{
    opacity: 0.6;
}


@keyframes line-top-open {
    0% {
    	transform: translate3d(0,0,0) scaleY(1) scaleX(1);
    }
    20% {
    	transform: translate3d(0,3px,0) scaleY(1) scaleX(1);
    }
    40% {
    	transform: translate3d(0,-20px,0) scaleY(.5) scaleX(1);
    }
    100% {
    	transform: translate3d(0,-20px,0) scaleY(.5) scaleX(6);
    }
}

@keyframes line-bottom-open {
    0% {
    	transform: translate3d(0,0,0) scaleY(1) scaleX(1);
    }
    20% {
    	transform: translate3d(0,-3px,0) scaleY(1) scaleX(1);
    }
    40% {
    	transform: translate3d(0,20px,0) scaleY(.5) scaleX(1);
    }
    100% {
    	transform: translate3d(0,20px,0) scaleY(.5) scaleX(6);
    }
}

@keyframes line-top-close {
    0% {
    	transform: translate3d(0,-20px,0) scaleY(.5) scaleX(6);
    }
    60% {
    	transform: translate3d(0,-20px,0) scaleY(.5) scaleX(1);
    }
    100% {
    	transform: translate3d(0,0,0) scaleY(1) scaleX(1);
    }
}

@keyframes line-bottom-close {
    0% {
    	transform: translate3d(0,20px,0) scaleY(.5) scaleX(6);
    }
    60% {
    	transform: translate3d(0,20px,0) scaleY(.5) scaleX(1);
    }
    100% {
    	transform: translate3d(0,0,0) scaleY(1) scaleX(1);
    }
}

JS

let menuIcon = document.querySelector('.menu-icon');
let menu     = document.querySelector('.menu');

menuIcon.addEventListener('click',function(){
    menuIcon.classList.add('active');
    menuIcon.classList.remove('paused');
    menu.classList.add('active');
});

menu.addEventListener('click',function(){
    menuIcon.classList.remove('active');
    menuIcon.classList.add('paused');
    menu.classList.remove('active');
});

/*

    version developed by : https://compositu.com
    
    All the credits to: https://100dayscss.com/about/
    039 - Menu Toggle
    
*/