Radixhound

I’m going to start posting Mephisto recipes on my blog. The idea is inspired by the Rails Recipes book, but I doubt I will be able to do it with the level of style and professionalism you can expect from the Pragmatic Programmer line of books.

In this recipe, you will see how you can use liquid to automatically generate a top-level nav bar with all the sections in your site. This way you can create new sections and pages and they will just appear! The end result will look something like this:

Edit: I messed up this recipe. I tried following it myself a little while ago and found that there are a few errors in it. Yick. So I’m going to make my next recipe #1b and post a rewrite.

The key to this recipe is site.sections. You need to loop through all the sections and link to them. The other important component is the correct CSS to turn an unordered list into an inline list that looks like tabs.

The Liquid

<ul id="nav">    
   {% for sect in site.sections %}
      {% if sect.name != 'Home' %}
          <li><a class="{% if site.current_section == sect %}curr_section {% endif %}gainlayout"                      href="{{sect.url}}">{{sect.name}}</a>
          </li>
      {% endif %}
   {% endfor %}
</ul>

The CSS

In this case, I broke out the color and font styling into separate CSS to make things a bit more portable for myself.

Structure

ul#nav {
list-style-type: none;
padding-bottom: 24px;
margin-top: 10px;
}

ul#nav li {
float: left;
height: 21px;
margin: 2px 2px 0 2px;
}

#nav a {
float: left;
display: block;
text-decoration: none;
padding: 4px;
}

#nav a:hover {
color: #D0D3AF;
}

Coloring and Styling

#nav a {
    color: #fff;
    background: #927E44;
    text-decoration: none;
    font-weight: bold;
    padding: 3px;
    }

#nav a { border: 1px #000 solid; }

#nav a.curr_section {
    background: #4D301B;
    }

The IE Fixes

Put this into your layout to cover the fixes needed to get things looking right on IE.

<!--[if lt IE 7]> {{'ie' | stylesheet }}<![endif]-->
<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* or whatever we might need tomorrow */
</style><![endif]-->

Then you need to create a stylesheet called ie.css, put this in as a minimum. All your other pre-IE7 fixes will also go in there.

.gainlayout { height: 0; }