Javascript 纯JS滚动导航栏

我试图学习JavaScript，但在纯JS中查找简单的示例并不容易。我在jQuery中编写了以下代码，但我很想在纯JS中创建一个下拉导航栏。关于如何处理代码有什么想法吗

这是我用HTML和jQuery制作的：

<nav>
        <ul>
            <a href='#' id='logo'><h2>QuokkaCentral</h2></a>
            <a href='#' id='hamburger'><li>MENU &#9776;</li></a>
            <a href='#' id='cross'><li>CLOSE X</li></a>
            <div id='navbar'>
                <a href='#' class='menu'><li>Quokka</li></a>
                <a href='#' class='menu'><li>Rottnest</li></a>
                <a href='#' class='menu'><li>Find us</li></a>
                <a href='#' class='menu'><li>Social</li></a>
            </div>
        </ul>         
</nav>


$("#navbar").hide();
$("#cross").hide();
$("#hamburger").click(function(){
    $("#navbar").slideDown(300); 
    $("#hamburger").hide();
    $("#cross").show();
});

$("#cross").click(function(){
    $("#navbar").slideUp(300);
    $("#cross").hide();
    $("#hamburger").show();
});

$（“#navbar”）.hide（）；
$（“#交叉”）.hide（）；
$（“#汉堡”）。单击（函数（）{
$（“#导航栏”）。向下滑动（300）；
$（“#汉堡”）.hide（）；
$（“#交叉”）.show（）；
});
$（“#交叉”）。单击（函数（）{
$（“#导航栏”）.slideUp（300）；
$（“#交叉”）.hide（）；
$（“#汉堡”）.show（）；
});

这就是我的结局。希望能有帮助

var-navbar=document.getElementById（'navbar'）；
var cross=document.getElementById（'cross'）；
var hamburger=document.getElementById（'hamburger'）；
cross.style.display=“无”；
navbar.style.display=“无”；
hamburger.addEventListener（'click'，function（）{
navbar.className-=“slideUp”；
navbar.className+=“slideDown”；
navbar.style.display=“块”；
hamburger.style.display=“无”；
cross.style.display=“block”；
});
cross.addEventListener（'click'，function（）{
navbar.className-=“slideDown”；
navbar.className+=“slideUp”；
setTimeout（函数（）{
navbar.style.display=“无”；
}, 300);
cross.style.display=“无”；
hamburger.style.display=“block”；
});
#navbar.slideDown{
动画名称：slideDown；
动画持续时间：.3s；
}
#导航条{
动画名称：slideUp；
动画持续时间：.3s；
}
@关键帧向下滑动{
0% {
显示：无；
溢出：隐藏；
高度：0px；
}
100% {
显示：块；
溢出：隐藏；
高度：72.2113px；
}
}
@关键帧滑动{
0% {
显示：块；
溢出：隐藏；
高度：72.2113px；
}
100% {
显示：无；
溢出：隐藏；
高度：0px；
}
}