Archive navigation drop down lists

I was asked yesterday for insight as to how I generated the list of categories you see on the right hand side of my weblog. It’s a drop down list that also shows the structure of my category archives. Selecting a category will take you to the archive page for it.

I generate this using MT and a small touch of PHP code. If you are producing a PHP index page (or a PHP “sidebar.php” which is included on your main index page), you can use this technique. MT alone can generate the list of categories for the dropdown, but it does not provide information about the ‘depth’ of the category for nested categories (note to self: fix that). So I’m using some PHP code here to keep track of the depth as it lists the categories.

The following is the block that I use to generate the category drop down (this is a drop-in replacement for the default MT 3.2 category sidebar module block):

<MTIfArchiveTypeEnabled archive_type="Category">
<div class="module-categories module" id="category-archives">
   <h2 class="module-header">Categories</h2>
   <div class="module-content">
      <select onchange="nav(this)">
         <option>Select a Category...</option>
<?php
$depth = 0;
<MTTopLevelCategories><MTSubCatIsFirst>$depth++;</MTSubCatIsFirst>
echo "         <option value=\"" .
   (<$MTCategoryCount$> ? '<$MTCategoryArchiveLink$>' : '') .
   "\">" .
   str_repeat('&nbsp;', ($depth-1)*3) .
   "<$MTCategoryLabel encode_php="qq"$>" .
   "</option>";
<MTSubCatsRecurse>
<MTSubCatIsLast>$depth--;</MTSubCatIsLast>
</MTTopLevelCategories>
?>
      </select>
   </div>
</div>
</MTIfArchiveTypeEnabled>

The template code for generating the list of monthly archives is similar, but more straightforward since it doesn’t use any PHP glue:

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module" id="monthly-archives">
   <h2 class="module-header"><a href="<$MTBlogURL$>weblog/">Archives</a></h2>
   <div class="module-content">
      <select onchange="nav(this)">
         <option>Select a Month...</option>
         <MTArchiveList archive_type="Monthly">
         <option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
         </MTArchiveList>
      </select>
   </div>
</div>
</MTIfArchiveTypeEnabled>

The only other relevant piece is the Javascript ‘nav’ routine that goes in your Site Javascript template:

function nav(sel) {
   if (sel.selectedIndex == -1) return;
   var opt = sel.options[sel.selectedIndex];
   if (opt && opt.value)
      location.href = opt.value;
}

TrackBack

TrackBack URL for this entry:
http://bradchoate.com/mt/feedback/tb/1363

7 Comments

Ed Kohler said:

I like the drop-down structure. It really cleans up what can become an unruly list of categories. My only concern would be search engine indexing since search engines don't do drop-downs. Having a secondary navigation such as a link to archives would keep content from disappearing from search engines.

Brad Author Profile Page said:

I'm not terribly concerned with the indexing of the category archives themselves. There is a master archive index which has a link to all available entries though.

goblins Author Profile Page said:

I've been looking for code like this. However, was is it that I am missing that keeps the php from coming in like garbledygook? I am running PHP.

Heidi said:

I found that putting the function nav into my site js thingy did not work for me. Instead, I used

<script type="text/javascript" charset="utf-8">
function nav(sel) {
   if (sel.selectedIndex == -1) return;
   var opt = sel.options[sel.selectedIndex];
   if (opt && opt.value)
      location.href = opt.value;
}    
</script>

which came from a Widget I have installed called "Monthly Archive Dropdown."

Many thanks for this - just configured it for my cats, and it makes me all happy inside.

anonymouse said:

Any chance that we can see a real, live. functional page? Just curious, that notes are helpful but its always nice to see the the actual, functional code in the page(s).

Brad Author Profile Page said:

@anonymouse: This is the code I'm using on the main page of this site.

About

This article was published on March 6, 2006 12:36 PM.

The article previously posted was The world's most expensive remote keyboard.

The next article is Tunneling SubEthaEdit.

Many more can be found on the home page or by looking through the archives.

Powered by Movable Type