« Creating an About Page | Main | Scheduled Postings and Cron Jobs »

Creating a Horizontal Navigation Bar

This tutorial is out of date, but some of the concepts may still be useful. ~Elise March 5, 2007

The default Movable Type layouts don't give you a lot of choice in terms of navigation. Clicking on the top bar with the title of the weblog will take you back to the main page of the weblog. Every other nav element is in the sidebar. You can however, pretty easily add a horizontal nav bar, with links to important-to-first-timers, or frequently used areas of your site, such as archives, about, or contact links.

nav_horizontal.gif

Adding horizontal nav bar requires adding a few lines of code right underneath the banner section in your index and archive templates and adding a few new elements to your style sheet. Once you've created your navigation code, the most efficient way to add the code to the index and archive templates is with the use of an include, either a PHP or MT Include.

1. Decide what you want to have in your top navigation.

If you want links to an about page or a contact page, you need to create those pages (see Creating an About Page). By default every MT blog comes with a master list of all of your entries at www.yourblog.com/archives.html. You can link to this for your archives, or you can create a new index template with the archives organized the way you want.

2. Create the index template navigation code.

There are many different ways to incorporate a horizontal nav bar including using Javascript, dropdown menus, text and image links. See Listamatic for an extensive collection of different ways to list out nav elements using css.

The following is one example of the most basic horizontal navigation, using text and css. Start by editing your Main Index template. After the ending div tag of the banner code section, add a navigation div ID followed by links to the sections of your blog to which the navigation will point.

Example:

<div id="nav">

<a href="http://www.yoursite.com/about.html">about</a> | <a href="http://www.yousite.com/archives.html">archives</a> | <a href="http://www.yoursite.com/contact">contact</a> | <a href="http://www.yoursite.com/index.xml">rss</a>
</div>

Save the template.

3. Add navigation elements to the Stylesheet.

Add #nav style information at the bottom of your stylesheet. Adjust for padding, margin, font, background color, border, and link style. For example,

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#71B8D5;
color:#fff;
border-bottom: 1px solid #6F8C8F;
}

#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}

Save template and rebuild the stylesheet and Main Index templates.

4. Adjust the code if you want some elements on the left and some on the right of your nav bar.

To split the navigation into left and right sections create 2 additional classes in your stylesheet and use the span html tag to incorporate those classes on your index template.

nav_split.gif

This is an example of the original nav code explained above now split into two separate classes:

<div id="nav">
<span class="navright"><a href="http://www.yoursite.com/index.xml">rss</a></span>

<span class="navleft">
<a href="http://www.yoursite.com/about.html">about</a> | <a href="http://www.yousite.com/archives.html">archives</a> | <a href="http://www.yoursite.com/contact">contact</a></span>
</div>

These classes can be added to your stylesheet, below the #nav ID element.

.navright {
float: right;
padding-right:10px;
}

.navleft {
padding-left:10px;
}

5. Create an include file.

You can add a nav bar without using includes by just adding the nav html to each of your index and archive templates, anywhere your banner appears. However, it is much easier to create a separate include file. That way when you change one element of your navigation, the changes are immediately reflected on all of your template pages.

To create an include file, follow the instructions in the tutorial Using PHP and MT Includes. If your site is not set up for php, use an MT Include. The only difference is that you will need to rebuild your site when you make a change to the navigation template, in order for the change to be reflected on the site.

Browser Weirdness

It always helps to view your weblog in many different browsers to make sure everything looks as you expect it to. One odd behavior I encountered adding a nav bar to LMT is that IE Windows and Firefox put a border around the banner, which is a clickable image. This border interfered with the nav bar. To get rid of this problem I added a #banner img element like so:

#banner img {
border: none;
}

Another odd behavior I encountered with Firefox was the right side nav text disappeared off of the nav bar, even though the page validated, as well as the CSS. I found ordering the <span class="navright"> before the <span class="navleft"> in the index template corrected this problem.

Comments (4)

Interesting idea, Elise. I did something similar on my individual entry archives using a template module for the navigation. Then I just put the following code under the banner in my template:

<$MTInclude module="navigation"$>

Now I can just update the template module right in MT when I want to change the navigation.

I use horizontal navigation on my site which uses code taken from A list apart. This code lets you use images as well so that you can have a tabbed effect with rollovers. You can be a little bit more creative once you throw images in to your navigation - just as long as it doesn't become image heavy - I hate that! :D

Thanks for this. However, my NavBar seems to be relative to the parent page, so when in a monthly archive it doesn't work.

Any easy fixes?

GruntDoc [TypeKey Profile Page]:

Well, for me the answer was to use absolute URL's, which I didn't use initially, but stupidly used relative ones.

Read and follow directions. If I had, it would have worked for me.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)