iPad上的下拉菜單

我在我正在構建的網站上使用CSS下拉菜單。當您將鼠標懸停在父項標籤上時，下拉菜單會淡入使用CSS3的過渡屬性。我遇到的問題是父母標籤鏈接到另一個頁面，所以當您點擊iPad上的父母標籤時，它會將您帶到頁面而不是顯示下拉菜單 - 這會導致可用性問題。iPad上的下拉菜單

有沒有辦法讓第一個水龍頭出現下拉菜單，第二個水龍頭會把你帶到父頁面？

這裏是我用來顯示菜單的HTML：

<nav> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="http://www.apple.com">Team</a> 
     <ul> 
     <li><a href="http://www.apple.com">Our Workers</a></li> 
     <li><a href="http://www.apple.com">Join Us</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

而且這裏有一個的jsfiddle鏈接：http://jsfiddle.net/A64QU/197/

在此先感謝，我感謝所有幫助。

來源

2012-06-12 realph

觸摸UI隱喻中沒有「懸停」，雖然在jQuery Mobile UI中有一個對應事件被稱爲touchhold;當手指在觸摸屏上按下一定時間時例如被觸發。無論如何，500毫秒，700毫秒。例如，當您按住某個按鍵，[a]鍵時，iPad的虛擬鍵盤上會出現類似的情況：您會彈出[a]的變體形式（變形，重音等等）。

你可以連線，所以菜單打開的代碼將在touchhold上被調用而不是在tap事件上，然後讓單個菜單項監聽tap事件。您必須通過編寫所需的JavaScript來重寫Mobile Safari的touchevent，或者安裝實現此行爲的UI庫。

來源

2012-06-12 16:52:13 Tim

您的設計在正確的軌道上調用了第一個水龍頭上的菜單和第二個水龍頭上的父頁面。這將在僅有觸摸屏或觸摸屏的設備上工作，有時用戶不能總是「懸停」，並且對於難以將光標穩定在菜單上的用戶至關重要，因此我建議通過懸停到顯示菜單無論這是移動Safari，Internet Explorer還是任何其他瀏覽器，都可以進行設計。

要做到你的要求，處理對<a>標籤的Click事件（例如使用jQuery：http://api.jquery.com/click/）（你可以使用jQuery的切換，或顯示/隱藏）和隱藏/顯示這樣的菜單然後擴展代碼來考慮是否顯示或隱藏菜單，以確定是否應該防止標籤的默認行爲並顯示菜單（例如jQuery的preventDefault：http://api.jquery.com/event.preventDefault/），或者允許發生點擊<a>的默認行爲：導航到<a href> URL。

考慮到使用這種方法，您可能還需要提供一種方法，讓用戶在打開菜單後關閉菜單（並阻止頁面的某些部分）。通常，這是通過文檔級別的點擊處理程序完成的。

我不建議嘗試實施觸摸按住，因爲這不是用戶所熟知的。根據我對用戶測試的經驗，大多數人都不會嘗試這種方式，即使看起來好像他們是菜單一樣。

來源

2012-12-06 03:16:00 waded

iPad上的下拉菜單

回答

相關問題