Category menu excluding the parent

This code was posted on the forum in response to FireFusion’s request for a method to display a category menus with the following structure:

Master Parent Category
# Category
## Sub category
## Sub category
## Sub category
# Category
## Sub category
## Sub category
## Sub category
# Category
## Sub category
## Sub category
## Sub category

In order to output the following (excluding the master parent category):

<ul>
<li class="cat">Category</li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
<li class="cat">Category</li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
<li class="cat">Category</li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
<li><a href="#">Sub category</a></li>
</ul>

Using in-built tags to generate the menu

<txp:category_list parent="master-parent" exclude="master-parent" children="0" wraptag="ul" break="">
	<li class="cat"><txp:category title="1" />
	<txp:category_list parent='<txp:category />' exclude='<txp:category />' wraptag="ul" break="" class="subcat_list">
		<li><txp:category title="1" link="1" /></li>
	</txp:category_list>
	</li>
</txp:category_list>

The above code should be self-explanatory, but to summarise – the master parent and children categories are first excluded from the list of categories with the wraptag <ul> applied. Then, the category title is displayed with the <li class="cat"> applied. Finally, a second level <ul> is created with the current parent category excluded, followed by a list of categories wrapped in <li> tags.

Create an active state for the current link

If you would like to create an active state for the current category in the menu, replace this code:

<li><txp:category title="1" link="1" /></li>

With this:

<li<txp:if_category name='<txp:category />'> class="active"</txp:if_category>><txp:category title="1" link="1" /></li>
comments powered by Disqus