2 level horizontal navigation in Rails

Hi,

I want navigation structure like this..

<ul id="navigation">
  <li id="home" title="link to homepage"><a href="#" >Home</a></li>
  <li id="products" title="link to products"><a href="#">Products</a>
   <ul>
     <li id="softw" title="link to software"><a
href="#">Software</a></li>
     <li id="hardw" title="link to hardware"><a
href="#">Hardware</a></li>
   </ul>

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

swoany

Well, first off, nested <ul> is not valid XHTML, so you're better off using CSS class to differentiate the nested level of various <li> 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_indent2' },
{:id=>'', :title=>'', :href=>'', :text=>'', :class => 'li_indent1' },
]

iterate that structure to create your <li> lines, and use css to create the indent pattern you need.

<ul>
<% products_menu.each do |nav_item| -%>
'<li id="' + nav_item[:id] + '" class="' + nav_item[:class]...etc
<% end %>
</ul>

Of course, that could be written as a general purpose helper so you don't have so much messy logic in the view file, but rather something simple like this:

<% draw_nav_items(products_menu) %>

-- greg willits

Google "son of suckerfish"

Greg Willits wrote:

Greg Willits wrote:

I want navigation structure like this..

<ul id="navigation">
  <li id="home" title="link to homepage"><a href="#" >Home</a></li>
  <li id="products" title="link to products"><a href="#">Products</a>
   <ul>
     <li id="softw" title="link to software"><a
href="#">Software</a></li>
     <li id="hardw" title="link to hardware"><a
href="#">Hardware</a></li>
   </ul>

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

Well, first off, nested <ul> is not valid XHTML

Yes it is. You're just not allowed to nest a <ul> _directly_ inside another <ul> because all children of <ul> have to be <li>. But this:

<ul>
   <li> ... </li>
   <li> ...
     <ul> ...
       <li> ... </li>
     </ul>
   </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 <li><ul></ul></li>. 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