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!

[cat.]

this! i love! i will be playing around with it soon and try to get more organized. i actually have avoided adding links because i dont want it over crowded on the page. but this is super duper! thanks!

i have a question about how you get the "more" to open up in the entry instead of a new page... i love how that works but just cant figure it out with typepad. (i am a pro user so i can do the custom thing)

thanks again, love the site, love that you are a chicago girl!

[Daisy]

Brilliant! I'm going to get a good night's sleep Friday night and then find some time at the weekend to try this.

[Mindy]

THANK YOU!!! I have been knocking myself unconscious trying to find an elegant way to handle long lists, and i have been concentrating on toggling show/hide with java script. I think I like your solution better--it is certainly easy to use! You are so linked up!

[Mindy]

I have been able to make the acrhives menu work just great, but have had not luck with the categories or Typelists...is there an addition step or two needed? A header must be added, and something to indicate that it is an ul, and also, which pieces of code need to be customized for our own lists?

Don't want to seem grabby, but I'm determined to follow your good example! Does it help that I'm from Chicago too? : )

[Mike]

Thanks for the great tip. I tried out advanced templates and drop down lists tonight, and it all went surprisingly well :)

[Don]

Ah, thank God I found this once more from the TypePad User Group thread of a while back... been trying to figure out a way to do this, and I imagine Brenna et al. are getting really tired of the constant error-notice tickets my lame-o attempts have been generating in their help system.

Thanks for posting this!

[erica]

thank you, thank you! this is exactly what i've been wanting to do with my ever-growing typelists.

[Susan]

I've been greatly admiring your site for the past few weeks, and it is one of the blogs that I always come back to because it is so well done and a real joy to visit. I am new to the world of blogs, but your site design is a real inspiration to me. Hopefully one day I hope to have a site as cool as yours! Great colors and great design. Thanks for all your time & effort. :)

[jlt]

I haven't added archives (have only archived by category) or offsite links precisely because I was worried about pushing my google ads off the page - and that's the only way I can pay for the site. This will be very, very helpful - thanks.