Drop down menus in TypePad

I have a lot of "supplemental content" (aka crap) taking up space in the sidebars of this blog, so my remedy is drop down menus. These are fairly easy to impliment and they free up a lot of space otherwise occupied by long lists of links. I'm sure someone out there is wondering how to create these, so here's a handy dandy how to guide. Just copy the code, alter it to suit your needs, and paste it into your Advanced Template.

Archive lists are ideal for drop down menus because they tend to get pretty long over the life of a blog. Here's the code for monthly archives:

<form>
<select onChange="document.location=options[selectedIndex].value;">
<option value="">archives by month</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</form>

Here's the code for a Categories menu:

<form>
<select onChange="document.location=options[selectedIndex].value;">
<option value="">archives by category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</option>
</MTArchiveList>
</select>
</form>

I put the two codes together inside of one form and added some style types to make it look nice, like this:

<form>
<select style="width:170px; margin: 0px 0px 10px 5px; font-family: verdana, Arial, sans-serif; font-size: 11px;" onChange="document.location=options[selectedIndex].value;">
<option value="">archives by month</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>

<select style="width:170px; margin: 0px 0px 10px 5px; font-family: verdana, Arial, sans-serif; font-size: 11px;" onChange="document.location=options[selectedIndex].value;">
<option value="">archives by category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</option>
</MTArchiveList>
</select>
</form>

You could make a drop down menu of just about any long list of links. I use one for links to weblog and journal sites, like this:

<form>
<select onChange="document.location=options[selectedIndex].value;">
<option value="">weblogs and journals</option>
<MTList name="blogs & journals">
<option value="<$MTListItem field="url"$>"><$MTListItem field="title"$></option>
</MTList>
</select>
</form>

Make sure to be absolutely certain that the MTList name is exactly how it is in your TypeList configuration, or you'll get an error when you rebuild the template. There is a very annoying bug involved in using TypeList tags: you have to rebuild your sidebar every time you add a link before it'll appear on your blog.

Here is an Everything TypePad post about TypeList tags, which should help if you're going to attempt to put a List into a drop down menu. Also make sure to check out the Movable Type manual for archive template tags.

Comments

[Valerie]

Hi! I just found your site and i love the design!