Radixhound

A few weeks back, I posted a Mephisto recipe for setting up a navbar using liquid that will automatically include all the sections in your site. It turns out that it wasn’t that good, so I’m revisiting the issue and posting a recipe that works. You can see it in action in my new section The Playground.

Read on to get the code.

The Liquid.

First create a new liquid template _navbar.liquid. Within that template, dump the following code:

 
<div id="navbar">
    <ul id="nav">
    {% for sect in site.sections %}
        <li>
            {% if site.current_section == sect %} 
                <p class="current">{{sect.name}}</p> 
            {%else%}
                <a href="{{sect.url}}">{{sect.name}}</a>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
</div>

The CSS

Ok, now you have to style your list. Here’s a sample CSS style for a horizontal tab style layout that sits at the right of the page.

#navbar { width:100%; height:2em; }
#navbar ul { list-style-type:none; float:right; margin-right:15px; }
#navbar ul li { float:left; height:21px; margin:-4px 2px 0 2px; }
#navbar a, #navbar p.current {
    display:block; 
    text-decoration:none; 
    padding:.74em 10px .73em; 
    font-weight:bold
    }
#navbar a {border:2px solid transparent; }
#navbar p.current { margin-top:0px; }
/* do the colors */
#navbar a, #navbar p.current { color:#000; } 
#navbar p.current { background-color:#F55;border:2px solid #000; } 
#navbar a:hover { background-color:#55F;border:2px solid #000; }

Hook it Into Your Layout

Now you have to hook it into your layout. You’ll do this by using an include in your main layout file. It goes like so: {% include 'navbar' %}

There. That should get you much farther than the first recipe of the same name. I trimmed down the CSS I used on a particular site, so it’s not 100%. You’ll need to tweak it for IE6 as well – but that’s another issue.