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上的下拉菜单

回答

相关问题