使移动菜单适用于移动设备的最佳做法是什么？

我环顾四周，但我还没有找到答案，似乎是一个共同的问题。使移动菜单适用于移动设备的最佳做法是什么？

我有一个在悬停时使用的基本下拉菜单（使用jQuery的hoverintent插件）。它适用于桌面浏览器，但对于不会将iPad悬停的点击事件转换为点击的移动设备而言，它不起作用。这里的JavaScript作为它现在是：

$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(  
function() { 
    $(this).children('div').fadeToggle(fadeInSpeed); 
}, 
function() { 
    $(this).children('div').fadeToggle(fadeOutSpeed); 
});

我的问题是：什么是用于移动设备的点击和悬停用于台式机的下拉菜单中最干净和最安全的方法是什么？我有一对夫妇的想法，但不知道哪个：

附加onclick事件并禁用每次有点击时悬停。
检测悬停能力（不知道这是如何完成的），并使用点击处理程序（如果可用）。

在此先感谢。

来源

2012-08-09 Evan Hobbs

默认情况下，iOs和一些Android会执行悬停事件。这很方便，但是，您需要确保您的顶级链接导致有效的锚点。不可点击的父母放置者的日子已经过去，如果这个链接只导致一个页面，所有的孩子被列为链接，那就这样吧。但让它去某个地方。

来源

2012-08-09 22:01:14

我很害怕......我只是做了一个快速审查espn.com，sports.yahoo.com，skype.com和一些其他人，他们都在做你说的父母链接， ..有没有其他解决方案比为每个顶级导航项目创建额外的页面？ – 2012-08-09 22:38:07

你不需要页面，哈希就足够了。然后，您可以根据位置散列显示或隐藏菜单项。 – 2012-08-10 12:22:43

@TorstenWalter这是一个很好的观点。哈希就足够了。有一些优点和缺点，但如果你想避免额外的页面，那么哈希值可能是最好的方法。 – 2012-08-10 16:32:19

至少iOS会在有事件处理程序时自动干扰hover事件，因此您必须为hover事件点击一次，第二次为任何click事件点击。

霍夫的检测是微不足道的。检查客户端是否支持touch。如果有touch，则不存在hover。

if ("ontouchstart" in document) { 
    // touch only code 
} else { 
    // "desktop" code 
}

来源

2012-08-09 21:30:39

谢谢。那么我的问题就是移动设备，但没有触摸屏（例如黑莓手机）？ – 2012-08-09 21:52:40

他们应该支持屏幕阅读器所做的事情 - 想到“焦点”和“模糊”。我无法验证这一点。 – 2012-08-09 21:59:36

谢谢，Torsten，这实际上是我没有意识到我需要的好信息。完善。 – jffgrdnr 2013-01-09 17:30:38

使移动菜单适用于移动设备的最佳做法是什么？

回答

相关问题