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>
12 Comments - Comments RSS Feed
Jonathan Stubbs
# 24 January 2011
Hi Bici, saw you forum post about the problem.
Looks to me like you have a nested ul inside the <ul id=“subnav_products”>, so you may need to adjust the rule to:
css: ul#subnav_products ul li a.active { color: #cc0000;
}
Note the extra ul. See if that works. If not, can you post the HTML output?
bici
# 24 January 2011
still not working. i got rid of the second need for the UL. Now i only have
<div id="leftnava"><div id="nav">
CSS: #leftnava ul li a:hover {
color: #cc0000;
}
#leftnava ul li a.active {
color: #cc0000;
}
bici
# 24 January 2011
<div id=“leftnava”><div id=“nav”>
<ul class=“category_list”>
<li><a href=“http://example.dev/index.php?s=products&c=angelo-brand”>Angelo Brand</a></li>
<li class=“active”><a href=“http://example.dev/index.php?s=products&c=tiger-brand”>Tiger Brand</a></li>
</ul>bici
# 24 January 2011
PS when i code the category listing like this:
<li><a class=“active” href=“http://example.dev/index.php? s=products&c=tiger-brand”>Tiger Brand</a></li>it works fine
Jonathan Stubbs
# 24 January 2011
Bici, the second example works because your rule is for the anchor (a) tag:
#leftnava ul li a.active {
color: #cc0000;
}
If you change it to:
#leftnava ul li.active {
color: #cc0000;
}
Then it should work for the first example, which sets the active class to the li tag – <li class=“active”>. Hope this helps!
bici
# 24 January 2011
Yes! Many thanks. I had some other leftnava css that was interfering with the out put. it now works.
P.S. I am starting to “get” TxP a little more after this exercise
Husain Hakim
# 15 February 2011
Hi,
Is it possible to have an active class for the top category? Like this:
<ul>
<li class=“active”>My Category
<ul>
<li>Sub Category1</li>
<li>Sub Category2</li>
<li>Sub Category3</li>
</ul>
</li>
</ul>
bici
# 16 February 2011
Hi –
i added the following to my form that handles navigation:
<txp:section_list wraptag=“ul” break=“li” active_class=“active” sections=”, about, store, samples, contact, links” />
Simon
# 25 February 2010
How would you limit the amount of child categories say to 4 and the have a view more link which would then output the remaining categories, so it would be something similar to this business directory,
www.athlone.ie