3-level expanding category based menu

In a project I have some “static pages” organized using categories and subcategories. There is a weblog for the content of the pages and every entry has an accompanying category. The menu was generated with the nested {exp:weblog:categories}-tag. The currently active menu-item had to have a different style associated. You’d normally do this by comparing the category name with an URL-segment.

However a further requirement was that the menu was supposed to expand. At first only the parent categories are to be shown. When a category is selected, its subcategories should show up. Only the subcategories of the selected category and only the 1st-level subcategories. When a 1st-level subcategory is selected, the corresponding 2nd-level subcategories are supposed to show up - if there are any.

I found no way to implement this behaviour using built-in functionality and hard-coding the menu was not an option since the process of adding a new page into the hierachy should be limited to adding a new category and writing an entry assigned to this category.

I ended up with writing a little plugin.

Because I did not want to completely reinvent the category display - which turned out to be quite mind-boggling at times - I decided to stick to the standard {exp:weblog:categories}-tag and just manipulate its results. That is, I let it generate the normal category-list and just eliminate the items I don’t want to display based on the current category.

In order to do this the plugin needs two tag-pairs. (Only one if you don’t use the nested display but off the top of my head I can’t fancy an application with linear output where this plugin would be useful. Except some fancy javascript menu perhaps. Who knows… )

The first tag, {exp:cat_expand:expander}, goes inside the {exp:weblog:categories}-tag. The purpose of this tag is to decide whether the actual category is to be displayed or not. If not, it omits the output.

It has one mandatory parameter: category="{category_id}" and one optional parameter: active-style="font-weight:bold;" . Into active-style you can put any CSS-instructions that you want to be applied to the active category. If it is set the active category will be surrounded by <div style=”your CSS”></div>.

The second tag, {exp:cat_expand:wrapper}, goes around the {exp:weblog:categories}-tag. It’s sole purpose is to strip out any empty <ul></ul> and <li></li> pairs that emerge because the containing categories have been omitted.

The plugin should work whether “Use Category Names In Links” is enabled or not. It’s functionality is limited to three levels (parent - children - grandchildren).

A working example can be seen here. It uses the following code:

{exp:cat_expand:wrapper}
{exp:weblog:categories weblog="{my_weblog}" style="nested"}
{exp:cat_expand:expander category="{category_id}" active-style="font-weight:bolder;"}
<a href="{path=testsite/static}">{category_description}
{/exp:cat_expand:expander}
{/exp:weblog:categories}
{/exp:cat_expand:wrapper}

I’m used to utilize {category_description} for the link-text because it allows white-space and special characters while using category names in links. You are of course not bound to do this at all.

The only drawback is that this functionality is limited to pages within this category-hierachy but that is always the case when you use this category-based approach to “static pages”.

If you think it could be useful for you get