2 level horizontal navigation in Rails

Rails
1

Hi,

I want navigation structure like this…

  • Home
  • Products
    • Software
    • Hardware

    Someone good ideas or link, plugins, helpers to realize this in rails?

    swoany

2

On May 19, 2008, at 1:12 PM, Remco S. wrote:

Someone good ideas or link, plugins, helpers to realize this in rails?

Well, first off, nested

    is not valid XHTML, so you’re better off
    using CSS class to differentiate the nested level of various

  • items. That will also simplify the Ruby code (no need to create
    recursive functions).

    I’d probably use an array of hashes:

    products_menu = [
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent2’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent2’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    ]

    iterate that structure to create your

  • lines, and use css to
    create the indent pattern you need.
      <% products_menu.each do |nav_item| -%> '<li id="' + nav_item[:id] + '" class="' + nav_item[:class]...etc <% end %> </ul> <p>Of course, that could be written as a general purpose helper so you<br> don’t have so much messy logic in the view file, but rather something<br> simple like this:</p> <p><% draw_nav_items(products_menu) %></p> <p>– greg willits</p>
3

Google “son of suckerfish”

4

Greg W. wrote:

On May 19, 2008, at 1:12 PM, Remco S. wrote:

Someone good ideas or link, plugins, helpers to realize this in rails?

Well, first off, nested

    is not valid XHTML, so you’re better off
    using CSS class to differentiate the nested level of various

  • items. That will also simplify the Ruby code (no need to create
    recursive functions).

    I’d probably use an array of hashes:

    products_menu = [
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent2’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent2’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    {:id=>’’, :title=>’’, :href=>’’, :text=>’’, :class => ‘li_indent1’ },
    ]

    iterate that structure to create your

  • lines, and use css to
    create the indent pattern you need.
      <% products_menu.each do |nav_item| -%> '
    • http://www.smartertravel.com/

      remco

5

Greg W. wrote:

 <li id="hardw" title="link to hardware"><a

href="#">Hardware

Someone good ideas or link, plugins, helpers to realize this in rails?

Well, first off, nested

    is not valid XHTML

Yes it is. You’re just not allowed to nest a

    directly inside
    another
      because all children of
        have to be
      • . But this:
        • ...
        • ...
            ...
          • ...

        is perfectly legal. I think it’s better too, because it reflects the
        menu
        logic, renders well without a stylesheet and allows for easy
        collapsing/expanding of subtrees. You can still have a flat
        representation
        in the database, that’s a matter of taste.

6

On May 20, 2008, at 11:23 AM, Ix Quic wrote:

   <li> ... </li>
 </ul>

is perfectly legal. I think it’s better too, because it reflects
the menu
logic, renders well without a stylesheet and allows for easy
collapsing/expanding of subtrees. You can still have a flat
representation
in the database, that’s a matter of taste.

Hmm, New to me. Never seen/tried

      • . At first it
      seems really weird, but eventually makes sense, and it has the
      advantages you say.

      Well then, a recursive function it is…

      – gw