使叠加菜单从上到下滑动

Question

我正在为我正在构建的网站创建一个导航，该网站目前作为左侧的叠加层滑动。不过，我要做的是让它从顶部滑入。

下面是菜单的当前CSS和JS。我觉得旋转菜单进来的地方很简单，但我无法理解。

CSS

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    background-color: rgba(0,162,85,.9);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: center;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #f1f1f1;
        display: block;
        transition: 0.3s;

    }

        .sidenav a:hover {
            color: lightgray;
              opacity: 1;
        }


.sidenav .closebtn {
    position: absolute;
    top: 355px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

JS

var menuItems = [
    {
        name: "HowToQuit",
        openFunction: "openHow()",
        closeFunction: "closeHow()",
        state: false //closed
    },
    {
        name: "StayingQuit",
        openFunction: "openStay()",
        closeFunction: "closeStay()",
        state: false
    },
    {
        name: "FactsAndMyths",
        openFunction: "openFacts()",
        closeFunction: "closeFacts()",
        state: false
    }
];


function openHow() {
    document.getElementById("howtoquitnav").style.width = "100%";
    document.getElementById("howtoquitnav").style.maxWidth = "1046px";
}

function closeHow() {
    document.getElementById("howtoquitnav").style.width = "0";
}

function openStay() {
    document.getElementById("stayquit").style.width = "100%";
    document.getElementById("stayquit").style.maxWidth = "1046px";
}

function closeStay() {
    document.getElementById("stayquit").style.width = "0";
}

function openFacts() {
    document.getElementById("factsmyths").style.width = "100%";
    document.getElementById("factsmyths").style.maxWidth = "1046px";
}

function closeFacts() {
    document.getElementById("factsmyths").style.width = "0";
}

function handleMenuItem(menuItemName) {
    for (var i = 0; i < menuItems.length; i++) {
        if (menuItems[i].name === menuItemName && !menuItems[i].state) {
            var open = new Function(menuItems[i].openFunction);
            open();
            menuItems[i].state = true;
        } else {
            var close = new Function(menuItems[i].closeFunction);
            close();
            menuItems[i].state = false;
        }
    }
}