Javascript “如何修复”；加载页面时打开的侧栏"；？

我正在做一个侧栏导航。单击打开导航时会出现一个汉堡按钮。但当页面加载时，它已经打开了。我不希望它已经打开了。我该如何解决这个问题

我是JS的一个笨蛋。我在href属性中尝试了值“javascript:void（0）”，但没有成功

<a href="javascript:void(0)" class="click-menu" onclick="openMenu()">&9776;
</a>
<div class="side-menu" id="side-menu">
    <a href="#" class="cross-btn" onclick="closeMenu()" style="font-size: 50px">&times;
    </a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Login</a>
</div>

<script>
    function openMenu() {
      document.getElementById("side-menu").style.width = "250px";
    }
    function closeMenu() {
      document.getElementById("side-menu").style.width = "0";
    }
</script>

函数openMenu（）{
document.getElementById（“侧菜单”）.style.width=“250px”；
}
函数关闭菜单（）{
document.getElementById（“侧菜单”）.style.width=“0”；
}

预期结果：侧栏导航仅在单击汉堡图标时打开。

---

实际结果：加载页面时，导航已打开。

将显示：无添加到div侧菜单样式：

<div class="side-menu" id="side-menu" style="display:none;">

完整代码：

函数openMenu（）{
document.getElementById（“侧菜单”）.style.display=“块”；
}
函数关闭菜单（）{
document.getElementById（“侧菜单”）.style.display=“无”；
}

CSS的

部分？但是如果
#侧菜单
有一个
转换
？不会出现动画。
function openMenu() {
  document.getElementById("side-menu").style.display = "block";
}

function closeMenu() {
  document.getElementById("side-menu").style.display = "none";
}