超级下拉列表答案

【问题标题】：Mega dropdown lists超级下拉列表
【发布时间】：2010-10-17 18:01:08
【问题描述】：

我想制作一个像 Rails 网站 (http://guides.rubyonrails.org/) 中使用的或者 BaseCamp 中使用的那样的巨型下拉菜单。它们可以使用 Rails 表单助手完成吗？

【问题讨论】：

【解决方案1】：

不是自动的，不。 “大型下拉列表”实际上只是一个 DIV 元素，其位置看起来好像是打开的“指南索引”。您所要做的就是定位 DIV，使其看起来正确。

在您提供的网站中，这是通过将 DIV 嵌套在包含“指南索引”元素的元素中来完成的。像这样的：

<outerelement style="position: relative; top: 0px; left: 0px">
  <a href="#">Guide Index</a>
  <div id="index" style="position: absolute; top: 0px; left: 0px; display: none">
     <!-- all the items in the guide index -->
  </div>
</outerelement>

我一时想不起来如何使用 Rails 中的原型助手来生成它，但是当单击“指南索引”链接时，您只需要一些 Javascript 代码即可：

 Element.toggle('index');

大概是这样的：

 <%=link_to_function("Guide Index", "Element.toggle('index')")%>

所以你在 .rb 文件中的最终结果是：

<outerelement style="position: relative; top: 0px; left: 0px">
  <%=link_to_function("Guide Index", "Element.toggle('index')")%>
  <div id="index" style="position: absolute; top: 0px; left: 0px; display: none">
     <!-- all the items in the guide index -->
  </div>
</outerelement>

【讨论】：

【解决方案2】：

37Signals（Rails 的创建者）发布了一篇关于大型下拉导航的文章。文章主要关注可用性。

【讨论】：

【解决方案3】：

内置的表单助手用于创建标准的 HTML 表单元素。这些“大型下拉菜单”不是其中的一部分，必须手动创建，使用 HTML，希望有一些 CSS 和 Javascript。

我不知道有任何插件或类似的东西可以自动为你创建这个，但我相信你会找到一些东西。或者，您当然可以自己编写。

【讨论】：