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

I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.

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

1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.

1：我无法将悬停效果添加到图标/链接的底部边框以帮助突出显示焦点的边框。

2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.

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/

1 个解决方案

#1

You need to use the js detection that the example uses.

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

Add class="no-js" to your body element.
将class =“no-js”添加到body元素中。
Then on load, set document.body.className = "js" (or equivalent).
然后在加载时，设置document.body.className =“js”（或等效的）。

This will enable the menu.

这将启用菜单。

For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).

对于：悬停问题，您需要在body元素上使用class =“no-touch”（如果检测到触摸屏，则使用js将其删除）。

Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).

另一件事：你在在线~8（最后的那个额外的）上有一个html错误。

Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.

更新了小提琴：https：//jsfiddle.net/4Ljs1bfn/2/。你还有一些css问题，但我认为你可以自己修复它们。

#1