CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3
RKh
RKh

Reputation: 14161

Show banner and menu navigation bar on all pages

I am new to Rails. I am using Aptana Studio 3 to write a small application.

In the Views folder, I added a new .html.erb page and added a jQuery navigation menu bar. This page also has a banner. I want to keep this as a base page (like Master Page in .NET) for all the other pages.

I want all the other pages to automatically show the banner and menu bar on top.

How to do this? I am using Rails 3.2.

Edited

Code of application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

      <script type="text/javascript" src="..\Libraries\jquery.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function(){
                    $('li.headlink').hover(
                        function() { $('ul', this).css('display', 'block'); },
                        function() { $('ul', this).css('display', 'none'); });
                });   
      </script>
      <style type="text/css" rel="stylesheet">
            /* General */
            #cssdropdown, #cssdropdown ul { list-style: none; }
            #cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

            /* Head links */
            #cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
            #cssdropdown li.headlink a { display: block; padding: 15px; }

            /* Child lists and links */
            #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
            #cssdropdown li.headlink:hover ul { display: block; }
            #cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
            #cssdropdown li.headlink ul li a:hover { background-color: LightBlue; color:Black }

            /* Pretty styling */
            body { font-family: verdana, arial, sans-serif; font-size: 0.8em;}
            #cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
            #cssdropdown li.headlink { background-color: Blue;}
            #cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
      </style>  
</head>
<body>
<%= yield %>

        <div id="divMain">
            <div id="divHeader">
                <img src="..\Images\W.png">                 
            </div>
            <div id="divMenu">
                <ul id="cssdropdown">
                <li class="headlink">
                    <a href="#">Task</a>
                     <ul>
                      <li><a href="#">Add New</a></li>
                     </ul>
                     </li>
                      <li class="headlink">
                      <a href="#">Reports</a>    
                         <ul>
                      <li><a href="#">Report</a></li>
                     </ul>
                 </li>
                </ul>               
            </div>
        </div>

<div id="content"><%= content_for?(:content) ? yield(:content) : yield %></div>         
</body>
</html>

Code of Content.html.erb

<% content_for :stylesheets do %>
  <div id="divLogin">

  </div>
<% end %>

<% content_for :MainContent do %>
  <div id="divMain">

  </div>
<% end %>

<%= render :partial  => "layouts\application.html.erb" %>

Upvotes: 4

Views: 8459

Answers (4)

Jake Smith
Jake Smith

Reputation: 2813

One of the best sources for this topic is the beginning of the book The Rails View. Here is the link: The Rails View

This really helps with the content_for helper method, which will become your friend instantly once you know how to use it.

Upvotes: -1

jokklan
jokklan

Reputation: 3540

Rails uses layouts as master templates. As default will you have one master layout template called application, which you can find in app/views/layouts/application.html.erb. If you look at this file will you see something like:

 # app/views/layouts/application.html.erb
 <html>
   <head>
     ...
   </head>
   <body>
     ...
     <div id="content">
       # Your page content will be inserted here:
       <%= yield %>
     </div>
     ...
   </body>
 </html>

As default will this be rendered for all pages, and the content of each page (fx your new.html.erb) would be rendered in the yield block.

This means that application.html.erb is the right place to but generel layout stuff, like menus and banners that should appear on all pages.

If you want to have something that varies a bit for each page (fx different banners) can you add a special <%= yield(:banner) if content_for?(:banner) %> in your application.html.erb file. You will then be able to add a block in each of your pages for a banner like this:

# app/views/some_resource/some_page.html.erb
<% content_for(:banner) do %>
  # insert page specifik banner here
<% end %>
# normal content for page
...

I hope this answers your question?

You can also read more about layouts (fx how to use more then one layout) on http://guides.rubyonrails.org/layouts_and_rendering.html

Edit: correct way to implement content.html.erb

The content of content.html.erb should be:

# What is this? This has nothing to do with stylesheets?
<% content_for :stylesheets do %>
  <div id="divLogin">

  </div>
<% end %>

<div id="divMain">

</div>

So no content_for :MainContent block and don't render the ´application.html.erb´ layout template (it's not even a partial, so you can't do this).

Upvotes: 3

Jetinder Mand
Jetinder Mand

Reputation: 40

Watch from 5:18, from what I've read I think thats kind of what you may be looking for. Hope it helps.

Railscast #328

Also here is a link to Twitter's bootstrap navbar which you may want to look into. It will show a banner and navigation bar on all pages and is fairly easy to set up.

http://twitter.github.io/bootstrap/components.html#navbar

Upvotes: 0

Tom Naessens
Tom Naessens

Reputation: 1837

You can use nested layouts as described here.

Upvotes: 1

Related Questions