« 40+ Ways that TypePad Could Rock Even Harder | Main | Let's Show Them The Money! »

John T. Unger

Drop Down Menus for Categories + Archives

John T. Unger March 7, 2006

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: , , , , , , , , , , , , , ,

More Like This: Hacks for Categories , Hacks for Typelists , TypePad Hacks

Comments

Ivan Pope says:

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.

john t unger says:

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.

James Milstid says:

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!

john t unger says:

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.

john t unger says:

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.

Chris says:

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...

john t unger says:

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.

MiamiGirl says:

This is awesome! Thanks.

Darla says:

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

john t unger says:

Miami Girl + Darla,

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

adena says:

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?

john t unger says:

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!

john t unger says:

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.

adena says:

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!

john t unger says:

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.

adrian says:

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.

Carl Wasylyszyn says:

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.

Carla says:

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.

john t unger says:

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.

Randy says:

Great site. Glad I found it.

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

john t unger says:

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.

Randy says:

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).

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d8347bd5ba53ef

Listed below are links to weblogs that reference Drop Down Menus for Categories + Archives:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License