2008-08-19 64 views
13

我处于不幸的位置,无法在我正在构建的网站上实施下拉级联菜单。我正在寻找一种主要基于CSS的Suckerfish风格的解决方案,并且在一组简单的嵌套UL和LI上工作。CSS下拉菜单 - “最佳”?大多数功能丰富?

Son of SuckerfishSon of Suckerfish似乎是要走的路,但我不喜欢这种方式它消失了第二个你移动鼠标,因为与协调困难的用户将有一个噩梦导航网站(或只是不打扰,但由于它是一个公司网站,有一些人可能会使用我执行的任何)。我还没有想过需要

整齐的特点是受欢迎的,但我要找的两个主要因素是:使用嵌套的UL/LI结构

    1. 多级(可能是可配置的?)延迟,然后在菜单是“鼠标移出”时消失,即使它是由一些额外的JavaScript提供的。
  • 回答

    1

    你将无法得到一个纯粹的CSS下拉菜单与您需要的功能。你将不得不使用某种Javascript。或者像JQuery这样的库,已经提到过,或者通过修改Suckerfish代码来使用onclick而不是onmouseover/out。

    但是,通过使用全部Javascript路线,您可以让一组人(“有协作困难的用户”)变得更容易,但却使其他人(因某种原因关闭了Javascript的人)变得困难。

    您可能想要考虑添加一些替代方案 - 鼠标控制的鼠标悬停菜单适合那些舒适的鼠标;通过访问键的基于键盘的控制等等。

    0

    我看不到在JavaScript之外添加延迟的方法 - 但如果您要使用JavaScript,则可以使用JavaScript控制的菜单。

    如果您遵循语义正确的导航模式并进行设置,以便在JavaScript不存在的情况下正常显示(例如静态),您应该可以随时使用它。

    这是关于您的目标受众 - 谁更大? JS禁用或协调困难的用户?我猜想后者需要优先考虑(如果不是百分比使用残疾法则)。

    1

    我使用Steve Gibson网站grc.com上实施的解决方案。它做我需要的一切,并使用no javascript。然而,你正在寻找的延迟东西不在那里,所以你可能需要为它添加一些Javascript。

    0

    正如Lee Theobald所说,drop/down需要Javascript,而jquery是一个不错的选择。但在可接近性方面,请看“Listamatic”菜单和特殊的this nested

    7

    我会强烈建议您使用superfish,suckerfish菜单的jQuery自适应。它有许多功能(延迟就是其中之一),增加了一些奇特的动画功能,并且优雅地降低到正常的胭脂鱼菜单。它也不需要任何额外的标记。

    +0

    我这个同意。 – lupefiasco 2009-02-02 21:42:54

    1

    协调问题的一部分可能源于糟糕的设计。确保你有相当大的按钮,如果可能的话,在所有方面重叠。理想情况下,顶级导航按钮将在其下方出现一个下拉菜单(而不是左对齐)。下拉菜单的子菜单将遵循类似的模式。我发现有这种级别的错误填充容纳不协调的用户,并节省您在JavaScript编程的麻烦。

    当然,每个网站都有所不同,所以我更多地将其作为替代“假设”解决方案。

    0

    我的第一个推荐回声已经发出 - Steve Gibson's CSS Menu。它不使用JavaScript,就像您将要获得的跨平台兼容一样,并且实现相对简单。

    如果这不起作用,我的基于JS的建议去mygosuMenu。在查找Steve的菜单之前,我已经在我的所有项目中使用了相当长的一段时间。其高度可配置性;风格,结构和菜单代码都是独立的。它是一个基本的HTML表格,您可以通过CSS对您的内容进行样式设置。

    我使用后者仍然有两个站点