基于触摸的客户端上的 CSS 下拉菜单。纯 CSS 下拉菜单会消失吗？答案

【问题标题】：CSS dropdowns on touch-based clients. Are pure CSS dropdowns going to become extinct?基于触摸的客户端上的 CSS 下拉菜单。纯 CSS 下拉菜单会消失吗？
【发布时间】：2010-05-04 17:26:30
【问题描述】：

我的公司开始着手将 iPad 添加为我必须测试我的工作的浏览器。这让我开始思考......

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

然后我想即使您添加一些 javascript 以使菜单在单击时弹出...当菜单项（扩展到另一个菜单）也是一个链接时会发生什么。您如何区分单击以查看菜单或单击以转到该链接？

当基于触摸的客户端变得越来越普遍时，下拉菜单会发生什么？是否有任何解决方法？

【问题讨论】：

目前，如果带有 :hover 的元素可以获得焦点，它们仍然可以工作（或者据我所知）。我一直在研究这个并制作了一个快速、肮脏的测试屏幕mad-halfling.f2s.com 来查看它。在 iPad 上，如果元素被触摸，向上箭头图像和链接 CSS 悬停弹出窗口起作用，但“这是一个弹出窗口”文本不起作用。扩展/收缩只是 jQuery 测试，顺便说一句。但是，触摸屏的标准是什么，因此事情将如何发展，我不知道

标签： html css ipad touchscreen

【解决方案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 片段更改为“菜单”（完整 URI：http://example.com/#menu）。因为现在有一个 id 等于 URI 片段（“菜单”）的元素，所以应用了 :target 伪类，并且更改了 display 属性。

进一步阅读：

【讨论】：

【解决方案2】：

这是一种由技术问题造成的设计问题。我可能会将我的内容重新设计/重组为以下三种方式之一：

1- 单击激活的大型菜单 (example)。这里的失败是你可能有房地产问题。

2- 指向导航页面的顶级类别链接。这里的缺点是它需要额外的页面加载才能访问内容。

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

【讨论】：

【解决方案3】：

我的导航栏有这个功能（collins.class401.com/nav），你需要的废话它是 TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp 的修改版本他们的版本（和我的）使用可见性 :hover 他们的版本也只支持将作为菜单项，而我的也支持 s（尽管使用 spans 会破坏他们的键盘导航）如果你想要一个表单或菜单中的按钮，就像我有他们的版本通常适用于：悬停在 ipod touch 上，只要您单击“空白” 我的版本对触摸设备更加友好，并且有可点击的箭头来使用prototype.js切换显示，

或者，如果他们不能悬停，并且javascript关闭，设置一个php会话并重新加载页面，然后在页面末尾的样式标签中插入一个样式，这将覆盖可见性并根据是否显示点击显示或隐藏

【讨论】：