TOPIC
Site Navigation
As a first step toward adding links and styles to the sample application, we’ll update the site layout file application.html.erb (last seen in Listing 4.3) with additional HTML structure. This includes some additional divisions, some CSS classes, and the start of our site navigation. The full file is in Listing 5.1; explanations for the various pieces follow immediately thereafter. If you’d rather not delay gratification, you can see the results in Figure 5.2. (Note: it’s not (yet) very gratifying.)
Listing 5.1 The site layout with added structure.
app/views/layouts/application.html.erb
One thing to note immediately is the switch from Ruby 1.8– style hashes to the new Ruby 1.9 style (Section 4.3.3). That is,
has been replaced with
It’s important to note the old hash syntax is deeply entrenched, so it’s important to be able to recognize both.
Let’s look at the other new elements in Listing 5.1 from top to bottom. As noted briefly in Section 3.1, Rails 3 uses HTML5 by default (as indicated by the doctype (<!Doctype html>); since the HTML5 standard is relatively new, some browsers (especially older versions Internet Explorer) don’t fully support it, so we include some JavaScript code (known as an ‘‘HTML5 shim’’) to work around the issue:
<script src= "http: //html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The somewhat odd syntax
includes the enclosed line only if the version of Microsoft Internet Explorer (IE) is lessthan 9 (if lt IE 9). The weird [if lt IE 9] syntax is not part of Rails; it’s actually a conditional comment supported by Internet Explorer browsers for just this sort of situation. It’s a good thing, too, because it means we can include the HTML5 shim only for IE browsers less than version 9, leaving other browsers such as Firefox, Chrome, and Safari unaffected.
The next section includes a header for the site’s (plain-text) logo, a couple of divisions (using the div tag), and a list of elements with navigation links:
Here the header tag indicateselements that should go at thetop of the page. We’ve given the header tag two CSS classes, 3 called navbar and navbar-fixed-top, separated with a space: