使移動菜單適用於移動設備的最佳做法是什麼？

我環顧四周，但我還沒有找到答案，似乎是一個共同的問題。使移動菜單適用於移動設備的最佳做法是什麼？

我有一個在懸停時使用的基本下拉菜單（使用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

使移動菜單適用於移動設備的最佳做法是什麼？

回答

相關問題