4

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

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

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

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

4

3 回答 3

7

得益于 :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 属性。

进一步阅读：

于 2013-08-10T13:50:40.020 回答
4

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

1- 单击激活的大型菜单（示例）。这里的失败是你可能有房地产问题。

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

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

于 2010-05-04T17:47:54.357 回答
0

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

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

于 2010-07-23T23:11:16.947 回答