« Vote for the Best TypePad Hacks With a New Widget from Squidoo! | Main | Using TypePad to Tabulate Data »

John T. Unger

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

John T. Unger December 27, 2006

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.

More Like This: Agenda Updates , Basic Templates , Blog Tools , Hacks for Layout + Design , Hacks for Navigation , Hacks for Typelists

Comments

Debra Hamel says:

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.

Graham Smith says:

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.

john t unger says:

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.

Graham Smith says:

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

Graham Smith says:

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

Robert says:

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

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d834d33bcb53ef

Listed below are links to weblogs that reference How To Add Expanding-Collapsing Menus With Subcategories to your TypePad Blog:

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