javascript - 响应式菜单不适用于小屏幕

Question

我正在尝试创建响应式导航菜单。我在网上找到了一些教程，在找到我喜欢的教程后，我按照说明在我的网站上创建了它，但我似乎无法使用一些功能。

1:我无法使悬停效果正常工作，该效果会向图标/链接添加底部边框以帮助突出焦点。

2:当屏幕尺寸小于 32.5em (519px) 时，菜单应该变成折叠起来的单列菜单。菜单确实变成了单列，但它并没有像预期的那样折叠成一个按钮。它一直显示所有占用大量垂直空间的链接。

Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/

Answer 1

您需要使用示例中使用的js检测。

1. 添加class="no-js"到你的 body 元素。
2. 然后加载，设置document.body.className = "js" (或等效的)。

这将启用菜单。

对于 :hover问题，你需要 class="no-touch"在您的 body 元素上(如果检测到触摸屏，则使用 js 将其删除)。

另一件事:您在 <a href="...""> 处有一个 html 错误在 ~8 行(末尾那个额外的 ")。

更新 fiddle :https://jsfiddle.net/4Ljs1bfn/2/ .你仍然有一些 CSS 问题，但我想你可以自己解决它们。