Drop Down Menus for Categories + Archives

Let's start with a pretty easy hack that's also quite useful: Drop down menus for categories and archives. I found this hack at Colleen's blog. I've simplified her instructions a bit to make this easy, but you might want to read her post to see how she applied styles to the menus.

Drop down menus are a great hack that probably ought to be a standard form of Typelist. Currently you can only do this if you have a pro account and can alter your template code. Aside from making navigation easier and saving space in your sidebar, there's another thing I really like about these menus— they allow you to make your full archives available in an obvious way. If you've been blogging for over ten months, you may have noticed that the standard TypePad list for archives is limited to displaying only ten months. I find this annoying for two reasons: it makes it harder for readers to find older entries and it obscures the fact that you've been blogging for a longer period of time. I do take bloggers more seriously when I can see that they've been at it for over a year, and I doubt I'm alone in that. It turns out that the archives title is a link to an automatically generated page which has links to the full archives, but I don't think that is very clear… I would never have figured that out if Typepad Tech support hadn't told me.

If you look near the top of the sidebar in this blog, you can see how the menus look. Click on the extended post link for full instructions and easy cut+paste code.

To Make drop down archive menus follow these steps. You must have a TypePad Pro account and be using advanced templates in order to use this hack.

1. Go to your design tab for the blog you want to add drop down menus to.

2. Click the template for your sidebar. If you have more than two columns, make sure you choose the correct sidebar template.

3. Copy your existing code and paste it into a text document in case you make a mistake and need to start from scratch. This is always recommended when you alter template code.

4. find the typelist in which you want to insert your archives. It will look something like this:
<!--#include virtual="/lists/tph_subscribe/module.inc"-->

Actually, you will be inserting the menu between Typelists… I don't think there is a way to position it in the middle of an existing Typelist. Because it has no header/headline, it will show up at the bottom of the list above it as though it were part of that list.

5. Insert the follwing code, verbatim:

        <div class="module-content">
            <ul class="module-list">
<form>
<select style="width:150px; 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:150px; 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>
            </ul>
        </div>

6. click "save" then "publish."
7. Reload your blog. You should now have menus. Yay!

You don't have to do menus for both sets of archives if you only want one. You can choose one or the other by selecting just one of the code paragraphs above.

Tags: typepad, blog, movabletype, blogs, blogging, web2.0, weblogs, design, typelist, hacks, typepadhacks, categories, archives, tags, advanced templates

Comments

[Posted: Mar 17, 2006 11:28:37 AM]

My main comment on this comes from part of the entry. You say:

3. Copy your existing code and paste it into a text document in case you make a mistake and need to start from scratch. This is always recommended when you alter template code.

God, how simple and obvious is this advice. You would have thought that TypePad would offer a simple backup/restore function for when you're mucking about with code. How hard would that be?
And, even more than that, where are ANY tools for code editing? They layout is apalling. It is the worst code editing space imaginable. I tend to copy the code into Dreamweaver to edit it - but that is like using a sledgehammer to crack a sunflowerseed.

[Posted: Mar 17, 2006 12:57:33 PM]

Ivan,

Yeah, I too do a lot of my editing in DreamWeaver.

What kind of code editing tools would you like to see, specifically? Let me know.

I'm not a major code geek, myself… I find instructions, try them until I get them to work, and then write up the simplest instructions I can (more on that later). My areas of expertise are more in design, usability and vision (as in, what else could I make this do). If you have some good suggestions for a code hacking interface I'd like to hear your thoughts!

It feels to me (yeah, that's how I think) like a backup/restore feature might be a non-trivial problem, but again, if you have some examples of ways this has been implemented speak up. An easy way I can think of would be allowing users to download backup files of their templates. I don't think this currently exists in TypePad, but I've wished it did several times.

[Posted: Mar 19, 2006 12:21:39 AM]

Great hack! It just took me a few minutes to read through your instructions and set it up. It really makes the archives a lot more accessable and user friendly.

Another thing... I tend to click on drop-downs just to see what's there. It's just more "comfortable" than committing to a new page... it give the user more control and satisfies curiosity! By getting a preview of what's there, I'm more likely to click through.

Like your blog! Thanks!

[Posted: Mar 19, 2006 3:52:01 AM]

Another navigation feature I'd like to see added: the ability to have a "Next/Previous" or "More" link at the bottom of your main page. Like Engadget.com or Lifehacker.com. That way you don't have to rely on Archives or Categories as your sole means of reading older posts.

[Posted: Mar 19, 2006 6:09:12 PM]

James,

That's the just kind of ease-of-use I'm shooting for. Glad to hear it worked for you.

Your thoughts on how the menu inspires curiosity and control are interesting, too.

[Posted: Mar 19, 2006 8:07:03 PM]

Jerry,

Yeah, I agree. The main index page should have a link to older posts at the bottom. Actually, adding a template that allows users to add a footer with various content to the main index would be great… I'll see if I can find a hack for that in the mean time.

[Posted: Mar 31, 2006 5:37:48 PM]

I am using a Pro account with Advanced Templates and there are already footers there to be used. I use them on Raleighing.com to hold the bottom image on the page (as well as some invisible stats code) but they could be used for anything. I am not sure, but there is probably a way to figure out how to put a "next" and "previous" link at the bottom as well... I'm going to have to think about that one...

[Posted: Apr 1, 2006 2:34:01 AM]

Chris,

Nice design on Raleighing.com. I like the calendar icons, the icons in the post footer, and yeah that page footer. I'll get in touch soon to chat about how you did some of those.

[Posted: Apr 11, 2006 3:32:30 PM]

This is awesome! Thanks.

[Posted: May 24, 2006 6:07:05 PM]

Thank you soooo much!!! This is definately the best solution for users with either a long list of categories of years of archives!!!

[Posted: May 25, 2006 12:33:59 PM]

Miami Girl + Darla,

Glad you liked it. It's definitely one of my faves.

[Posted: May 30, 2006 5:58:13 PM]

Quick question-

I followed your instructions, and got the handy drop downs.

Only problem is, I don't know how to get rid of the ORIGINAL categories and archives list. I had both up there, which seemed counterproductive, so I changed it back.

How do I go about getting rid of those? (I'm code retarded)

Also, has anyone figured out how to do a drop down for other lists, like blog lists?

[Posted: May 30, 2006 6:52:10 PM]

Hi Adena,

No problem. What you want to do to get rid of the original category and datebased archives is:

Go to the template for your sidebar (where you pasted the dropdown menu code).

To remove the category archives, find and delete the following code:

<div class="module-categories module">
<h2 class="module-header"><$MTTrans phrase="Categories"$></h2>
<div class="module-content">
<ul class="module-list">
<MTCategories>
<MTBlogIfArchives archive_type="Category">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
<MTElse>
<li class="module-list-item"><$MTCategoryLabel$></li>
</MTElse>
</MTBlogIfArchives>
</MTCategories>
</ul>
</div>
</div>

To remove the datebased archives, find and delete the following code:

<MTBlogIfArchives>
<div class="module-archives module">
<h2 class="module-header"><a
href="<$MTBlogURL$>archives.html"><$MTTrans phrase="Archives"$></a></h2>
<div class="module-content">
<ul class="module-list">
<MTArchiveList best_archive_type="1" lastn="10">
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</div>
</div>
</MTBlogIfArchives>

Then follow the directions above to reinsert the drop down menu version and click save and republish. Everything should be rosy!

[Posted: May 30, 2006 7:00:08 PM]

Adena,

Forgot to answer your second question… There are instructions for creating other drop down lists for Typelists here:

http://colleen.typepad.com/first/2004/01/drop_down_menus.html

Scroll down, it's after the menu and category hacks.

[Posted: May 30, 2006 11:51:52 PM]

Thanks! It worked on the archives and categories! I have to be really ambitious to try and work through the other one, but at least I know it can be done!

Thanks again!

[Posted: May 31, 2006 12:54:14 AM]

Cool beans, Adena!

Glad it worked for you. Thanks for the question… it's a good addition to the page, since I'm sure there were other readers wondering the same thing.

[Posted: Aug 10, 2006 1:04:40 PM]

Hi, I'm using Advanced templates in Typepad and have drop down menus in the Sidebar. Now I want to transfer them under the banner, yet cutting and pasting the Sidebar code doesn't work. Any suggestions on extra code to insert for such a task ?

Glad I found this blog as Typepad sorely needs a user forum. Well done.

[Posted: Oct 17, 2006 10:52:51 PM]

Thanks for a great blog for additional resources and advocacy. I am fairly new to all of this and trying to get up and running, but there is much to learn. I am anxious to get my design established so I can begin entering a whole fat file of posts! I used the code for drop down windows and it worked. However, my sidebar 2 is now wider than my blog will accomodate, so it is being forced to appear at the bottom left after the posts. I know that I saw something about adjusting the blog width and post width, etc... even so, perhaps you could advise the BEST solution so others might avoid the problem by reading thru the comments. Again, it is much appreciated.

[Posted: Nov 19, 2006 2:42:28 AM]

I would suggest omitting the "font-family" and "font-size" style elements. Let the drop-down boxes render according to the user's browser preferences. This will especially be helpful for people with poor vision.

[Posted: Nov 19, 2006 2:54:52 AM]

Also, for XHTML correctness:

1. The <form> tag needs an action attribute: <form action="#">

2. The correct event is "onchange", not "onChange". XHTML is case-sensitive.

Sorry about the double-post.

[Posted: Dec 27, 2006 7:04:26 PM]

how do I get the header/title, "Archives", to appear above the archive dropdowns? I inserted the hack and deleted the old code as described but it wiped out the title. Thanks.

[Posted: Dec 27, 2006 10:47:22 PM]

Carla,

In the sidebar here, I used HTML to create a fieldset around the menus and some other elements. The code looks like this:

<fieldset style="border: 1px solid #99CC66; padding: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em;">
<legend><b>Archives</b></legend>
*insert hack here*
</fieldset>

You could use any HTML or CSS you like to create a header or title above the Archives. I happen to like the look of the fieldset.

[Posted: May 26, 2007 9:01:06 AM]

Great site. Glad I found it.

Question: Is there any way to create drop-down menus (using Basic Templates), say, in a Notes TypeList?

[Posted: May 26, 2007 10:18:11 AM]

Hi Randy,

The code provided here will not work in a notes style typelist, but you might be able to find a javascript or CSS menu that will work. You'd have to hand code the archive links into the javascript or CSS… The nice thing about doing this in advanced templates is that you can use the TypePad-specific code that automatically generates links to new monthly archives as well as categories.

[Posted: May 26, 2007 1:52:11 PM]

Thanks.

BTW, TypePad also has a page for "Creating Drop Down Navigational Menus" (using a 3rd party solution) in a notes typelist but it doesn't seem to support dynamic content (archives, categories).