Creating Drop-Down Navigation with Movable Type

By Byrne Reese
Posted August 16, 2008, in Tips & Tricks.

A common question from Movable Type users and designers is, "how do I create nice navigation for my web site?" The Professional Website template set and even Mid-Century have navigation build in. But there are Movable Type themes out there that don't have this feature and users want to know how to add it. This brief tutorial will show you how.

The Objective

The goal of this tutorial is to demonstrate how to add category driven drop-down menus to your web site that approximates the look and feel below:

What does this mean? Well, there are lots of ways to build navigation for a site. The method you will choose depends largely upon your content and implementation strategy. This methods are:

category driven navigation - using category and sub-category names as the menu and menu item names
page driven navigation - using page names as the menu and menu item names
folder driven navigation - using a hierarchy of folders (folders contain pages)

This article will focus on creating menus based upon your category hierarchy.

The HTML <head>

This example utilizes MooTools for the javascript that powers the fancy pull-down nature of the menus. You will need to download and install mootools.js into a js directory. Then you will need to link to the javascript in the html > head of your document like so:

<script src="/js/mootools.js" type="text/javascript"></script>

The CSS

#nav, #nav * {
        margin:0;
        padding:0;
        list-style: none;

}
#nav {
        height: 30px;
        font-weight:bold;
        font-size:14px;
        line-height: 30px;
        margin:0px 15px;
        border:1px solid #ddd;
}
#nav li {
        line-height: 30px;
        float: left;
        list-style:none;
}
#nav li a {
        color: #666666;
        display: block;
        padding: 0 13px;
        font-size: 11px;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        line-height: 30px;
        border-right:1px solid #ddd;
}
#nav li a:hover {
        text-decoration: none;
}
#nav li ul {
        position:absolute;
        left: -999em;
        width:15em;
}
#nav li:hover ul, #nav2 li.sfhover ul {
        left:auto;
        z-index:10 !important;
}
#nav li ul li {
        display:block !important;
        width:15em;
        border:1px solid #ddd !important;
        border-top:none !important;
        background:#fff;
}

The JavaScript

Once MooTools is "installed" you need to add the magic sauce that triggers the pull down menus. This should also be in the html > head of your document. Just cut and paste the following into your header:

<script type="text/javascript">
sfHover = function() {
  var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

The Template Code

Finally, you need the template code that produces the actual menu:

    <ul id="nav">
    <mt:TopLevelCategories>
      <mt:SubCatIsFirst><mt:HasParentCategory><ul class="children"></mt:HasParentCategory></mt:SubCatIsFirst>
      <li class="cat-item">
      <mt:IfNonZero tag="MTCategoryCount">
          <a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>>
            <$MTCategoryLabel$> (<$MTCategoryCount$>)
          </a>
      <mt:Else>
          <$MTCategoryLabel$>
      </mt:IfNonZero>
      <mt:SubCatsRecurse>
      </li>
      <mt:SubCatIsLast><mt:HasParentCategory></ul></mt:HasParentCategory></mt:SubCatIsLast>
    </mt:TopLevelCategories>
    </ul>
  </div><!--/nav-->

Back

25 Comments

Element Creative on August 18, 2009, 2:16 p.m. Reply

I was looking for something similar to create section-specific sub-navigation in a sidebar. There are a lot of incorrect template tag recipes in the Wiki and elsewhere. This was the first example that pointed me the right direction (Thanks, Byrne!)

My IP is blocked from editing the Wiki for some reason (working on getting that resolved), but for now, I thought I’d at least provide a quick overview of my solution for using Folders as site navigation.

I needed the solution to be dead-simple for an end-user to be able to manage their sub-navigation hierarchy within MT, and without a lot of hackery. To assist with that, I’m using the most excellent Sort Categories and Folders plugin by Hajime Fujimoto.

The limitation, of course, is that anything I want to display in the sub-navigation must be a folder. For my purposes, this is an acceptable restriction. YMMV.

The code, modified from Byrne’s example, will create a nested list tree. In my specific implementation, I don’t want a redundant link to the top level section, because that’s already in my global navigation. To include this link, just add the anchor tag to the mt:Else block list item as well.

In this particular example, I’m outputting the entire tree structure, then using jQuery to hide any tnavs that aren’t the current section. I’m sure you could take this code and put it into contextual templates to only generate the section chunk you’re interested in. In my case, I’m outputting this as an index template once and including with PHP.

I’ve spent more time than I’d care to admit hunting down this seemingly simple but quite elusive solution. I hope this helps someone looking for something similar.

<ul>
    <mt:TopLevelFolders sort_method="SortCatFld::Sort">
        <mt:SubCatIsFirst><mt:HasParentFolder><ul></mt:HasParentFolder></mt:SubCatIsFirst>

        <mt:HasParentFolder>
            <li id="snav_<mt:FolderBasename />"><a href="/<mt:FolderPath />"><mt:FolderLabel /></a>
        <mt:Else>
            <li class="tnav" id="tnav_<mt:FolderBasename />">
        </mt:Else>
        </mt:HasParentFolder>

        <mt:SubCatsRecurse>
        </li>
    <mt:SubCatIsLast><mt:HasParentFolder></ul></mt:HasParentFolder></mt:SubCatIsLast>
    </mt:TopLevelFolders>
</ul>

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese

Recent Blog Posts