November 22, 2004

Pull Down Menus

To save space on your sidebar listing of categories or monthly archives, you might want to use a pull-down menu like so:

To do this for your category list, make sure that you have category archiving selected as an archiving option in your weblog config, and add the following code to your sidebar:

<form action="" name="pulldown1">
<select name="mypulldown1"
<option value="">Select Category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>

You can also create a pulldown menu for your monthly archives using the following code:

<form action="" name="pulldown2">
<select name="mypulldown2"
<option value="">Select Month</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveDate format="%B %Y"$></option>

Note you can use a different MT date format in place of the one given. Also, you can create a new form name and select name; just swap out the new names on the OnChange line.

Please note that I'm not an expert on how Javascript forms work. I find examples on the MT Forums and on individual blogs and experiment with them until they work for me. These two code examples I've listed I've tried on one of my test blogs and they appear to work fine. They even validate.

Expandable List Menus - a way of showing a list of entries by category, used in LMT in the Table of Contents.
Hierarchical Dropdown List of Category Archives - David Raynes' drop down menus that show the category hierarchy if you use subcategories.
Brad Choate's PHP solution for Pull Down Menus that preserve subcategory hierarchy

Has this tutorial been helpful? Please consider linking to Learning Movable Type at . Thanks!

Posted by Elise Bauer on November 22, 2004 to Categories, HTML and Javascript
Comments(7) | Email to a friend | Printer-friendly version


If you would like to send a trackback
please use the following URL:

» Hierarchical Dropdown List of Category Archives from David Raynes
First, there was the monthly archive dropdown featured on Learning Movable Type. I thought it was a great idea, especially......[read more]

Tracked: February 10, 2005 04:22 AM


Excellent lesson!

Do you know if there is a way to change the default font of the pulldown to that of the site?

Hi Fred,

Great question. I have no idea. I don't even know where one would look for the answer. If you find out, let us know.

Hi Elise (and Fred),

Thanks for this pulldown menu information! I've employed it on my blog for archives, and am now wrestling with David Raynes' code for breaking out subcategories. (I can only get his solution to work at the top level of each hierarchy for some reason, and am trying to communicate with him now to see if that's by design. His category archive pages don't have the pulldown menu on them [like mine do], so it may have only been designed to work at the top level of the hierarchy. I'll let you know if I come up with a solution.


This is considerably later than you originally posted your question, but I have one way you can change the font in the menu: just change the "select" statement in Elise's code to read like this, where it includes the particular font style info:

select name="mypulldown2"
onchange="document.location=pulldown2.mypulldown2.options[selectedIndex].value" style="font-family:Verdana, Arial, Helvetica, sans-serif;color:#333333;background-color:#FFFFFF;text-decoration:none;font-size:8pt; width:150px;"

(Don't forget to include the brackets at the beginning and end of the statement. I removed them from this comment, so it would display properly.)

FYI, the first color declaration is for the text color (gray in this instance). Your font color and size, and the width (of the menu) may vary depending on your site's needs. I use the normal convention of specifying the primary font name, then follow it with the fonts that would display on other systems (Mac, Unix, etc.) if that particular font is not resident.)

Otherwise, the rest of Elise's code remains the same.

Now, you obviously need to know the font name, etc. but you can get that from the CSS file that creates the look-and-feel for your blog.

You might be able to specify the font style info in the CSS file itself rather than in the pulldown, but I'm not sure if you can specify info for "form" statements in a CSS file, and I haven't tried to do it yet for mine.

Hope this helps,

Hi Elise,

Just an FYI . . .

Regarding my need to employ David's hierarchical enhancement on all my archive pages, I forgot I needed to employ the MTInclude tag to reflect the fact that most Movable Type tags (as Michael Schneider points out very eloquently in his Showing recent Entries in the Sidebar discussion) "work with respect to the context in which they are used." Thus, David's instructions are as universally sound as they can be under the contraints of the program. Using the MTInclude tag as Michael suggests allows the hierarchical pulldown menu to be used on all index page levels.

Relative to Michael's instructions, here's what I did to employ David's menu style on all my pages:

1) Created a new template file Category List (categorylist.html; you could name yours whatever you want) and entered David's form code as the only element of the Template Body.

2) On the applicable index pages (all of mine for my instance - but at least Master Archive Index, Category Archive, Date-Based Archive, Individual Archive and monthly archive and weekly archive index pages if you're employing those and want this menu to show up on all your archive pages) - simple insert this tag where you want the menu to appear:

<MTInclude file="yourpath/categorylist.html">

As Michael states, the absolute path must be the path to your output directory. This is the same path that you entered as the "Local Site Path" in your weblog configuration. And remember, "categorylist.html" is what I named my index file to be "included". Yours might be named differently.

Lastly, remember to rebuild the whole site before viewing.

Thought you might want to see this, since David's solution grew out of yours!


Hi there,

fine work you do here, do know how to set up a pulldown menu for the latest 10 entries to simply jump to another article? I tried it for myself but it wont work atm.

best wishes

Has anyone managed to get the drop down menu to work for sub-categories? I don't want to show top-level categories.

WHat I am looking for is 2 pull-down menus for the categories I have that have sub-categories.

Are you pulling anything out of the template before putting the monthly-archive drop-down menu code in? Where in the template does it go?

Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)

Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:

Your email address:

Message (optional):