« Adding a Footer | Main | What Do All These Templates Do? »

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"
onchange="document.location=pulldown1.mypulldown1.options[selectedIndex].value">
<option value="">Select Category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>
</form>

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

<form action="" name="pulldown2">
<select name="mypulldown2"
onchange="document.location=pulldown2.mypulldown2.options[selectedIndex].value">
<option value="">Select Month</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveDate format="%B %Y"$></option>
</MTArchiveList>
</select>
</form>

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.

Links:

Comments (10)

Fred Greco:

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.

MadDog Author Profile Page:

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.

Fred,

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

MadDog Author Profile Page:

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!

Thanks,
Mark

Euan:

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.

Lee:

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?

I found out how to combine the Pull Down Menu for Categories and Entry Count. In place of the code mentioned above use:

<form action="" name="pulldown1">
<select name="mypulldown1"
onchange="document.location=pulldown1.mypulldown1.options[selectedIndex].value">
<option value="">Select Category</option>
<MTArchiveList archive_type="Category">
<MTIfNonZero tag="MTCategoryCount">
<option value="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel> (<$MTCategoryCount$>)</option>
</MTElse>
</MTIfNonZero>
</MTArchiveList>
</select>
</form>

Which was a tricky little thing to do since I had no idea what I was doing. Just visually guessing what to combine and where. But it works - you can see it on my site in use.

nasir:

hello
is there anyway to make a tooltip show when mouseover any items in the pull down menu.

Thnks

I used Steve's code for the pull down menu and entry count and it works perfectly. The code above has been clipped: what you'll need is this to complete it where it has been cut.

<option value="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel> (<$MTCategoryCount$>)</option>

I also had to specify the width of the pull down menu, in order for it to stop putting the sidebar underneath the blog entries.

Just cut and pasted your code and it works perfectly...Thanks a ton!

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)