I am attempting to integrate a main navigation section into my web
application. Naturally the easiest and DRY way to do this would be to
either include it in a layout, or as a partial. The only problem is
that I want the link for the current page to have its own css id
("current"). The only way I can think to accomplish this is to just
include the navigation in every page, but this is certianly not clean.
Any ideas?
Here is the navigation div (varied from List-O-Matic):
<div id="navcontainer">
<ul id="navlist">
<li><%= link_to ''desktop'',
{:action => ''index'', :controller
=>''desktop''},
:id => ''current'' %></li>
<li><%= link_to ''events'',
{:action => ''index'', :controller
=>''events''} %></li>
<li><%= link_to ''financials'',
{:action => ''index'', :controller
=>''financials''} %></li>
<li><%= link_to ''records'',
{:action => ''index'', :controller
=>''records''} %></li>
</ul>
</div>
And the nav css:
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
width: 100%;
list-style-type: none;
background: #fff;
}
#navlist
{
margin: 5px 0px 0px 0px;
padding: 0 0 20px 5px;
border-bottom: 1px solid #333;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 5px;
text-decoration: none;
color: #999;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #333;
padding-bottom: 2px;
background: transparent;
color: #333;
}
Thanks, Dave
--
~~~~~~~~~~~~~~~~~~~
D''Andrew "Dave" Thompson
http://dathompson.blogspot.com