移动优先汉堡菜单在网站的移动版本上不起作用，但在缩小时起作用

Question

我遇到的问题是汉堡菜单在我的手机上没有响应。 但是，当我将浏览器的窗口大小缩小到移动设备大小的窗口时，它确实有效。 好像出了点问题，但我不知道为什么。 请注意，我不能使用过多的课程或 ID，因为这是一个学校项目。

这是我当前的代码

 <nav class="navbar">
        <a href="index.html">
            <img src="images/spotify.svg" alt="Logo van spotify">
        </a>

        <!-- Gebruik span voor hamburgers bars -->
        <a href="#" onclick="myFunction()" class="toggle-button">
            <span></span>
            <span></span>
            <span></span>
        </a>
        <div id="active" class="navbar-links">
            <ul>
                <li><a href="premium.html">Premium</a></li>
                <li><a href="premium.html">Help</a></li>
                <li><a href="premium.html">Downloaden</a></li>
                <li><a href="premium.html">Account</a></li>
                <li><a href="premium.html">Uitloggen</a></li>
            </ul>
        </div>
    </nav>`

JS代码

`function myFunction () {
  document.getElementById("active").classList.toggle("show")
}`

我试过的：

我尝试应用其他 JS，但它破坏了我的代码，但主要是一个 JS 似乎可以工作

`function myFunction() {
  var x = document.getElementById("active");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

这段代码似乎适用于台式机和我的手机。 但是它使我的导航栏链接完全消失了。 我无法弄清楚原因。 我是一个新手，所以任何帮助将不胜感激。

我的 github 是： https : //github.com/Koayz/Spotify-Bryan-van-de-Pol而且我的网站也在线： https : //mbdehaan.nl/bryan/spotify/

Answer 1

汉堡菜单在三星移动浏览器上对我有用，但在 Chrome 移动浏览器上不起作用，这表明您可能在某个地方有一个不兼容的 CSS 规则。 我会更深入地研究你的git。

---

我认为问题在于您使用空跨度来模拟汉堡包菜单。 在 firefox 网络浏览器上，您可以单击“toggle-button” <a>标签上的任意位置，它将触发菜单。 在 chrome 网络浏览器上，如果您单击跨度本身，则不会发生任何事情。 我认为在移动版本中，跨度是唯一被点击的东西。

我建议用实际的<svg>元素替换汉堡包跨度（您可以在网上找到很多免版税的元素）并将函数附加到该元素上，或者将函数附加到每个跨度以及容器。

---

默认情况下，nav 元素将进入文档的常规流，因为您尚未指定位置。 修复它的一个简单方法是将导航栏的高度指定为 50 像素，然后将导航栏链接的位置设置为absolute并为其设置 50 像素margin-top 。 您需要为较大的屏幕视图取消设置此属性。