Mega dropdown lists

Question

I want to make a megadrop down like the one used in Rails gudes site (http://guides.rubyonrails.org/) or the ones used in BaseCamp.CAn they be done using the Rails form helpers??

Answer 1

Not automagically, no. The "mega dropdown list" is really just a DIV element positioned to look as if it was the "Guide Index" opened. All you have to do is position the DIV so that it looks right.

In the website your provided, this was done by nesting the DIV inside the element that housed the "Guide Index" element. Something like this:

<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>

I can't remember off the the top of my head how to use the prototype helpers in Rails to generate this, but you just need some Javascript code to do this when the "Guide Index" link is clicked:

 Element.toggle('index');

Probably something like:

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

So what you end up with in your .rb file, is:

<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>

Answer 2

37Signals (creators of Rails) have posted an article about the mega drop down navigation. The article mainly focusses on usability.

Answer 3

The built-in form helpers are for creating standard HTML form elements. These kind of "mega dropdowns" aren't a part of that, and have to be created manually, with HTML, hopefully some CSS, and Javascript.

I'm not aware of any plugins or something similar that creates this for you, automagically, but I'm sure you'll find something. Or, you could of course write your own.