How To Add Expanding-Collapsing Menus With Subcategories to your TypePad Blog

Drop-down menus with subcategories that can be used in TypeLists is one of the most common feature requests I get. This hack goes out to pieman, who first requested it. See an example of how it looks at johntunger.com in the Reviews + Press TypeList.

You can use this hack regardless of your subscription level (Basic, Plus or Pro) by pasting a simple bit of JavaScript into a notes style TypeList. The original source of the code used in this hack is from The JavaScript Source.

1. Download image files here.
2. Expand the zipped file and upload the three individual menu icons to your  blog's image directory using the File Manager (instructions here if you need them).
3. Download JavaScript text file here. You need to edit two things before uploading the code to your TypeList.  I've applied bold to all the parts of the document that you'll need to edit. (also to one optional section that allows you to change the indentation margins of the menu).
4. First, find the URLs for the image files you uploaded to your TypePad account. Wherever you see an image filename in parenthesis, ie: (minus.png) in the text document, replace it with the URL for the image hosted in your files. The easiest way to make sure you catch them all is to do a search for png. Do not delete the parenthesis (they're part of the JavaScript code).
5. Next, replace the categories and links with your own. You can make the list longer or shorter, etc. This step may be easier to do in an HTML editor such as Dreamweaver, but you can do it in any word program. Be very careful to make sure you properly nest the tags for the list items. If you upload the file to a TypeList with improperly nested tags, it may prevent your blog from displaying posts.
6. Create a new Notes style TypeList or Edit an existing one.
7. Copy the entire text file that you have downloaded and edited and paste it into your TypeList.
8. Save the changes to your TypeList.
9. View your blog. You should have a snazzy new expanding/collapsing menu!

One of the cool bonus features of this menu is that it sets a cookie to remember what state of expansion it was in when a visitor last viewed your site.

Comments

[Posted: Dec 27, 2006 6:34:08 PM]

Very cool. I had wondered in the past how this was done. I don't think I'll apply this anywhere right now as I have no particular need for it yet. But I wouldn't rule out using it in future.

[Posted: Jan 20, 2007 5:44:39 PM]

Hello
I have been in and out of your site for the last few days, trying to get my head around the coding for the menu. I have only just started tweaking my Blog with CSS.

I wanted to add a menu such as the one here but thought I had sussed it. Clearly I am not referencing the image files correctly and and am unsure as to the correct naming procedure for the URL, what it replaces and how it starts.

Please can you clarify for me how it should be written, exactly after the quotes? This is my url path 'http://grahamsblog.typepad.com/grahamsblog/images/plus.png'.

BUt when i paste that over the "url(minus.png)":" i don't get anything at all.

Hope that makes sense.

Also, I have seen this great 'minimal' margin menu at http://www.intueri.org/

The code is at http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

This is what I really like, its simplicity. But the coding is not something I am familiar with. Would be great to know if this could be adapted for Typepad.

[Posted: Jan 22, 2007 2:34:35 PM]

Hi Graham,

the way you want to do the link is:

url(http://grahamsblog.typepad.com/grahamsblog/images/plus.png)

Just paste your image url in between the parenthesis.

The "switchcontent" code from Dynamic Drive is pretty cool too. Thanks for pointing it out. You could definitely use it in TypePad following pretty much the same instruction set. Just add the javascript to your header or a notes style typelist and modify the HTML provided in Dynamic Drive's tutorial to suit your needs.

[Posted: Jan 24, 2007 4:08:42 PM]

Hey
Many thanks for the reply, sorry I didn't come back sooner. Will have a crack at it over the next few days.

Finding lots of real useful things on your site, gonna get me in trouble I know it. :)

I think I will try the Dynamic Drive one first, I like that one. If it goes wrong I'll come back for some more advice.

Thanks again,

Regards
Graham

[Posted: Jan 24, 2007 4:14:58 PM]

Me again
Feel somewhat cheeky asking for advice on something that wasn't even on your Blog. Sorry.

I meant to ask. On the Dynamic Drive site, one of the instructions is to download an external .js file. Obviously I can manage the download (I think), but then what? Where do I download it to, how is it referenced?

I really really do appreciate your help, CSS looks fun, but it's early days for me.

Thank you,
Graham

[Posted: May 20, 2008 12:46:38 PM]

I'm poking around your site, looking for a rollover horizontal expanding dropdown to work in Movable type 3.1. The title of this entry is expanding and Collapsing menus and the examples show the same. But the in the directions it seems like you have to click to make it work. I've yet to try and impliment it, but am I right or wrong?

As well, I'm guessing I add this as a template module and use an include. But how do I get it to load in the current site or window or content area of the site I'm creating rather than take you to another site?

Any insight would be greatly appreciated.
Rob

[Posted: Nov 23, 2008 1:15:56 PM]

I have used this hack for quite some time now (after having read here) and suddenly I found one day that the one of my lists which use this hack lost all the plus signs and they moved to anther list (which also uses this hack) - so now one list has 2 pluses and the other one just shows up as a long expanded list. The strangest thing is that this happens only when I view the blog in Internet Explorer and not in other browsers. Any ideas how I can correct this in IE? My blog is greensomethings.com/blog