Best to integrate dynamic navbar into layout

Rails
1

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 = ‘home’
else
@home_link = ‘home_button’
end

if @current_page == :about
  @about_link = '<td width="80" class="button_background"><a

href=“/store/about”>about’
else
@about_link = ‘about_button’
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

2

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

  • ” + (link_to_unless_current ‘View Books’, “/books/list”) +
    " : " + “
  • ” +
    “
  • ” + (link_to_unless_current ‘View Authors’, “/authors/list”) +
    " : " + “
  • ” +
    “
  • ” + (link_to_unless_current ‘View Categories’,
    “/categories/list”) + “
  • ”
    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:

      <%= navbar(url_for) %>

    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

    • 3

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

  • #{link_to_unless_current link.first,
    link.last}
    • ”}
    end
    end

    in the view:

      <%= navbar(nav_links) %>
    4

    I would put the html in a partial…