響應式菜單不適用於小屏幕

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問題，您需要在body元素上使用class="no-touch" （然后，如果檢測到觸摸屏，則使用js將其刪除）。

另一件事： <a href="..."">行的<a href="..."">出現html錯誤（末尾有多余的“）。

更新的提琴： https : //jsfiddle.net/4Ljs1bfn/2/ 。 您仍然有一些CSS問題，但是我想您可以自己解決這些問題。