一切都很简短，很清楚，嗯，我没有什么要解释的

HTML

<nav  id="mynav" class="navlist">
                <ul class="menuList">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Coffee</a></li>
                    <li><a href="#">Cold Brew</a></li>
                    <li><a href="#">Bakery</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </nav>

CSS

.navlist{
    position: relative;
    left:-100vw;
    /* change the left under a condition and add transition */
    /*hav a diffferent id or class and giv it left: 0 property and make the js run that yoha*/
    transition: 0.5s;
}

.navlist.responsive{
    position: relative;
    left: 0;
}

JS

var x = document.getElementById("mynav");

function closenav(){
    if(x.className==="navlist"){
        x.className += " responsive";
    } else {
        x.className = "navlist";
    }
}