媒体屏幕上的响应式菜单面临的挑战

Question

我正在努力在媒体屏幕上找到the menu of my blog的错误。有50％的移动访问量，这是一个很大的问题。我一直在阅读很多帖子，但我不能自己解决这个问题。

问题基本上是您无法在媒体屏幕上点击任何类别，因此菜单基本上没用。

菜单CSS看起来像这样，基本上行为应该类似于弹出菜单，其中链接以块格式显示。每个内部下拉菜单仍然可以切换，这样可以在不牺牲屏幕空间的情况下授予对子导航元素的访问权限。

{{1}}

Answer 1

您遇到的问题是您的菜单标题（亚洲，太平洋等）是链接（<a>标记）。在桌面浏览器上，您可以将鼠标悬停在这些链接上，并通过aria-haspopup触发，以显示其下方的子菜单。

在移动设备上，您无法悬停而是必须点击，但是当您点击<a>标记时会收到该标记并在您尝试访问该网址时对其进行处理。您需要使用javascript来确定点击是否应该触发下拉菜单（就像您想要在移动设备上）或转到根类别（就像您想要在桌面上一样）。