分享
为什么问答平台  ›  专栏  ›  技术社区  ›  Galen

基于触摸的客户端的CSS下拉列表。纯粹的CSS下拉列表会消失吗? - CSS dropdowns on touch-based clients. Are pure CSS dropdowns going to become extinct?

  •  4
  • Galen  · 技术社区  · 2 月前

    我的公司正着手将iPad作为一个浏览器添加到我的工作中去。这让我想到…

    因为基于触摸的客户机没有:悬停状态是纯粹的CSS下拉列表会消失吗?

    然后我想,即使你添加了一些javascript使菜单在点击时弹出…当菜单项(扩展到另一个菜单)也是链接时会发生什么。如何区分单击查看菜单或单击转到该链接?

    当基于触摸的客户机变得更加普遍时,下拉菜单会发生什么?有什么解决办法吗?

    3 回复  |  直到 5 年前
        1
  •  4
  •   Jacob G    9 年前

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

    单击激活的超级菜单( example )这里的失败在于你可能有房地产问题。

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

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

        2
  •  6
  •   andreas    5 年前

    纯CSS下拉列表在触摸设备上是可能的,这归功于:目标伪类 . 基本上,伪类对于ID与当前URL片段匹配的对象是活动的。这意味着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片段(“menu”)的元素,:target伪类将应用,并且显示属性将更改。

    进一步阅读:

        3
  •  0
  •   isildur4    8 年前

    我的导航栏有这个功能(collins.class401.com/nav),可以满足你的需要。 它是tjk_下拉菜单的修改版本 http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp 他们的版本(和我的)使用可见性:悬停 他们的版本也只支持将<A>作为菜单项,而我的版本也支持<SPAN>S(尽管使用跨距会中断他们的键盘导航),如果您想要表单或菜单中的按钮之类的东西,如我所拥有的 他们的版本通常适用于:在iPod touch上悬停,只要你点击“空白区域” 我的版本对触摸设备更友好,并且有可点击的箭头来使用prototype.js切换显示,

    或者,如果它们无法悬停,并且javascript处于关闭状态,则设置一个PHP会话并重新加载页面,然后在页面末尾的样式标记中插入一个样式,该样式将根据单击显示还是隐藏来覆盖可见性和显示。