CSS下拉菜单在触摸设备上的表现如何？纯CSS下拉菜单是否会灭绝？

Question

我的公司开始将iPad作为浏览器加入，我需要测试我的工作。这让我想到...

由于基于触控的客户端没有:hover状态,纯CSS下拉菜单会消失吗？

那么，即使您添加了一些JavaScript使菜单在点击时弹出...当菜单项（展开到另一个菜单）也是链接时会发生什么？您如何区分是查看菜单还是转到该链接的单击？

当触摸式客户端变得更加普及时，下拉菜单会发生什么？是否有任何解决方法？

- Galen

---

目前，如果带有:hover的元素可以获得焦点（或者这就是我能弄清楚发生了什么），则它们仍然可以工作。我一直在研究这个问题，并制作了一个快速、简单的测试屏幕http://www.mad-halfling.f2s.com/。在iPad上，如果触摸元素，则向上箭头图像和链接CSS悬停弹出窗口是有效的，但“这里是弹出窗口”文本不起作用。顺便说一下，展开/收缩只是jQuery测试。然而，关于触摸屏的标准以及事物将如何前进，我不知道。 - Mad Halfling

Answer 1

通过使用 :target 伪类，触摸设备上也可以实现纯CSS下拉菜单。基本上，该伪类对于具有与当前URL片段匹配的ID的对象是活动的。这意味着URI片段可用于将状态与CSS存储和共享。例如，假设我们在 http://example.com/ 上，它具有以下HTML和CSS：

<style>
    #menu {
        display: none;
    }
    #menu:target {
        display: block;
    }
</style>

<a href="#menu">Show the Menu!</a>
<div id="menu"> ... </div>

菜单默认是隐藏的。点击或触摸链接将会改变URL片段为“menu”（完整URI：http://example.com/#menu）。因为现在有一个ID等于URI片段（“menu”）的元素，所以应用了:target伪类，并且显示属性被更改。

进一步阅读：

• Mozilla开发者网络上的使用和示例
• 一个触摸友好的纯CSS下拉菜单实现

- andreas

Answer 2

这是一种由技术问题迫使的设计问题。我可能会重新设计/组织我的内容，有以下三种方式：

1- 点击触发的超级菜单（示例）。缺点是你可能会遇到房地产问题。

2- 顶级类别链接，导航到导航页面。缺点是需要额外的页面加载才能到达内容。

3- 让每个菜单项包含两个按钮，一个用于导航到页面（文本），另一个用于展开子菜单（箭头）。但是，如果存在子导航，则仍需要在用户单击菜单项后转到的页面上提供子导航。

- Jacob G

Answer 3

我的导航栏具有此功能（collins.class401.com/nav），适用于您需要的垃圾。 这是TJK_DropDownMenu的修改版本http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp 他们的版本（和我的版本）使用visibility来实现:hover 他们的版本仅支持将<a>作为菜单项，而我的版本还支持<span>（尽管使用spans会破坏它们的键盘导航），如果您想在菜单中添加类似表单或按钮的内容，就像我一样 他们的版本通常可以在iPod Touch上通过:hover正常工作，只要您点击“白色空间” 我的版本对触摸设备更加友好，并具有可点击的箭头以使用prototype.js切换显示

或者，如果他们无法悬停，并且关闭了JavaScript，则设置一个php会话并重新加载页面，然后在页面末尾插入一个样式标签，该标签将根据单击以显示或隐藏覆盖visibility和display。

- isildur4