Forum: Ruby on Rails best to integrate dynamic navbar into layout

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
charlie bowman (Guest)
on 2006-01-02 08:07
I've been trying to come up with a good way to integrate a dynamic
navbar into my layout.  By dynamic, I meas that each link has 3 images.
Normal, rollover, and dark for the current page.  I have it working but
it seems like there should be a better way.  Here is how I did it,
please let me know if there is a better way.  Rails makes so many things
simple, that this seems very awkward.

In my layout:
<%= navigation_bar %>

In my application_helper.rb
    if @current_page == :home
      @home_link = '<td width="80" class="button_background"><a
href="/store/home"><img name="home" border="0"
src="/images/home_dark.gif" alt="home"></a></td>'
    else
      @home_link = '<td width="80" class="button_background"
valign="top"><a href="/store/home/" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage(\'home\',\'\',\'/images/home_bright.gif\',1)"><img
name="home" border="0" src="/images/home.gif"
alt="home_button"></a></td>'
    end

    if @current_page == :about
      @about_link = '<td width="80" class="button_background"><a
href="/store/about"><img name="about" border="0"
src="/images/about_dark.gif" alt="about"></a></td>'
    else
      @about_link = '<td width="80" class="button_background"
valign="top"><a href="/store/about/" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage(\'about\',\'\',\'/images/about_bright.gif\',1)"><img
name="about" border="0" src="/images/about.gif"
alt="about_button"></a></td>'
    end
## this goes on for about 7 more links then I combine each variable into
one and return this to the layout.

In each template
<% @current_page = :home #or what ever link I want to be dark
Dan P. (Guest)
on 2006-06-07 03:17
I've started something similar which might help. It treats the navbar as
a list menu with css to be more semantically correct.

First, specify the navbar list items in the application helper so it's
accessible to all the views. In app/helpers/application_helper.rb put:

module ApplicationHelper
  def navbar(x)
    "<li>" + (link_to_unless_current 'View Books', "/books/list") +
"&nbsp;:&nbsp;" + "<li>" +
    "<li>" + (link_to_unless_current 'View Authors', "/authors/list") +
"&nbsp;:&nbsp;" + "<li>" +
    "<li>" + (link_to_unless_current 'View Categories',
"/categories/list") + "<li>"
  end
end

The in any of your view files you can include the helper by calling for
it while passing it the url_for the current page. For example in
app/views/books/list.rhtml put:

<ul id="navbar"><%= navbar(url_for) %></ul>

That will pass along the current pages url to the helper. And notice
it's wrapped in the html ul tag with a css style id.

In public/stylesheet/scaffold.css add the styles for your navbar:

#navbar {
	background: #CCCCCC;
	line-height: 2.7em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navbar li {
	display:inline;
}
#navbar li a  {
	background: #003399;
	padding: 0.7em 1em;
	text-decoration: none;
	color: #FFFFFF;
}
#navbar li a:hover {
	background: #990000;
	padding: 0.7em 1em;
	text-decoration: underline;
	color: #FFFFFF;
}

In the various styles you can say to use different background_images for
a:visited a:hover, etc... This example just uses different colors. It
might take a little while to figure out the styles just the way your
want them but having a global navbar that's written only once is much
easier to manage. If you add five more links or take away one you can do
it in one place and it's reflected on every page. You won't need the
MM_swapImage js also.

Hope this helps.

DAN
Erik P. (Guest)
on 2006-06-07 09:04
You could make the links an array to ease maintenance:

module ApplicationHelper
  nav_links = [
    ['View Books', '/books/list'],
    ['View Authors', '/authors/list'],
    ['View Categories', '/categories/list']]

  def navbar(links)
    links.collect {|link| "<li>#{link_to_unless_current link.first,
link.last}</li>"}
  end
end

# in the view:

<ul><%= navbar(nav_links) %></ul>
Peter E. (Guest)
on 2006-06-07 14:58
(Received via mailing list)
I would put the html in a partial....
This topic is locked and can not be replied to.