Javascript 我的侧边栏似乎不起作用。有人能指出我在这里犯的根本性错误吗？

对于希望在codepen中看到它的任何人：

汉堡的定义如下：

  <div id="hamburger" onclick="openNav()"">
    <a>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>

---

三天来，我一直在努力学习教程，但似乎每个地方都有一种稍微不同的学习方式，我就是不知道该怎么做。我尝试的东西似乎都不管用。我只希望菜单滑出，并推动它的网站的其余部分，并留下一个透明的白色薄膜覆盖在网站的其余部分

您的HTML有许多验证错误。只需使用简单的HTML验证程序在线工具进行检查，例如：

只是一些错误：

在第一个菜单项中，“列表1”前面有一个开口，请将其删除。

您忘记关闭列表项末尾的

检查所有ID和类名是否正确，所有内容都区分大小写，因此不允许混合使用，例如“MySideNav”和“MySideNav”

如果您总是关注标记的有效性，就不应该遇到这些问题

---

我希望这能对您有所帮助。

“mySidenav”！==“MySideNav”

您的

getElementById

使用的ID与您在元素上使用的ID不同使用（点击

F12

）并读取任何错误。1。您的css定义是嵌套的，这是无效的。2.中缺少关闭标记

html@VLAZ非常感谢。虽然这并没有解决问题，但显然会产生另一个问题，谢谢@塞巴斯蒂安西蒙哇！这么好的工具！非常感谢。

<nav id="MySideNav">
      <ul class="menumenu">
        <li><a class="menu" href="#><li>List 1</li></a>
        <li><a class="menu" href="#">List 2</li></a>
    </nav>


<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("site").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("site").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}
</script>

nav{
  display:block;
  list-style-type:none;
   position: -webkit-sticky; /* Safari */
 position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  width: 210px;
  height: 100%;
  overflow:auto;

  nav:open{
    left:0;
  }
  nav.*:first-child{
    position: fixed;
  padding: 1em;
  cursor: pointer;
  left: 0;
  clear: both;
  }
}