Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[howto] Nested category->sub-category->article menu
If anyone ever wanted to have a nested menu with consistent urls containing categories, sub-categories and articles here’s the code:
<ul id="menu">
<li><a href="<txp:site_url />"><txp:site_name /></a></li>
<txp:category_list children="0" break="li">
<txp:category title="1" link="1" section="default" />
<txp:article_custom category='<txp:category />' break="li" wraptag="ul" limit="999">
<txp:permlink><txp:title /></txp:permlink>
</txp:article_custom>
<txp:category_list parent='<txp:category />' exclude='<txp:category />' break="" wraptag="ul">
<li><txp:category title="1" link="1" section="default" />
<txp:article_custom category='<txp:category />' wraptag="ul" limit="999">
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom></li>
</txp:category_list>
</txp:category_list>
</ul>Basis for the above was Els’ code here
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [howto] Nested category->sub-category->article menu
Γειά σου, Γιάννη. Thank you very much for your code. This is something that I was looking for in order to rebuild the navigation of my professional site. Its hierarchy is currently organized by sections, but I think it should be better if I use categories. By the way, how should I change your code so that it works as a popup menu, as the current section menu does?
Ευχαριστώ παραπολύ.
Offline
Re: [howto] Nested category->sub-category->article menu
pompilos wrote:
Γειά σου, Γιάννη. Thank you very much for your code. This is something that I was looking for in order to rebuild the navigation of my professional site. Its hierarchy is currently organized by sections, but I think it should be better if I use categories. By the way, how should I change your code so that it works as a popup menu, as the current section menu does?
Γειά σου pompilos,
The code produces a ul based nested list so styling could be very easy but also hard due to cross browser problems (yes I’m talking about explorer:)
The suckerfish dropdown menus can easily be employed for this with an addition of a class to the sub-category sub menu. So if someone wants to use the styled suckerfish example the, ul id changes to nav and the daddy class is added to the submenu changing the code to:
<ul id="nav">
<li><a href="<txp:site_url />"><txp:site_name /></a></li>
<txp:category_list children="0" break="li">
<txp:category title="1" link="1" section="default" />
<txp:article_custom category='<txp:category />' break="li" wraptag="ul" limit="999">
<txp:permlink><txp:title /></txp:permlink>
</txp:article_custom>
<txp:category_list parent='<txp:category />' exclude='<txp:category />' break="" wraptag="ul">
<li><txp:category title="1" link="1" section="default" class="daddy" />
<txp:article_custom category='<txp:category />' wraptag="ul" limit="999">
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom></li>
</txp:category_list>
</txp:category_list>
</ul>Suckerfish menus do not behave well on ie7 but a hack can easily be found.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [howto] Nested category->sub-category->article menu
Anyone have an example of this in action?
Art Rogue – Fine Art Photography
Offline
Re: [howto] Nested category->sub-category->article menu
working on it but this is what it produces (all linked):
- Cat 1
- Article 1
- Article 2
- Etc
- Sub-cat 2
- Article 3
- Article 4
- etc
- Cat 3
- Sub-cat 4
- Article 5
- etc
- Sub-cat 4
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: [howto] Nested category->sub-category->article menu
This is very useful code, thanks for posting it for reference colak.
Can anyone figure a way to get this kind of menu (to enable suckerfish menus) working with rss_unlimited_categories? Unfortunately, it doesn’t look good, because the rss_uc_list tag doesn’t have a children=“0” attribute. : (
EDIT: Nevermind, being new to rss_uc, I forgot that it uses the usual native Txp category list, so the above code works just the same if you using rss_uc, you just need to replace the article_custom tags with rss_unlimited_categories_article_list tags if you want the article listings under each category. I’m not using it for that purpose though. I just wanted suckerfish menus with article counts displayed, and this is working well like this:
<ul id="cat_menu">
<txp:category_list children="0" break="li">
<txp:category title="1" link="1" section="default" /> (<txp:rss_unlimited_category_count section='<txp:section />' name='<txp:category />' />)
<txp:category_list parent='<txp:category />' exclude='<txp:category />' children="0" break="li" wraptag="ul">
<txp:category title="1" link="1" section="default" /> (<txp:rss_unlimited_category_count section='<txp:section />' name='<txp:category />' />)
<txp:category_list parent='<txp:category />' exclude='<txp:category />' children="0" break="li" wraptag="ul">
<txp:category title="1" link="1" section="default" /> (<txp:rss_unlimited_category_count section='<txp:section />' name='<txp:category />' />)
</txp:category_list>
</txp:category_list>
</txp:category_list>
</ul>That is a little rough, but it works. When I have a more polished example I will post it.
Last edited by aswihart (2010-07-28 00:26:18)
Offline
#7 2010-10-31 07:25:52
- Dimitri
- Member
- From: Johannesburg
- Registered: 2010-10-31
- Posts: 129
Re: [howto] Nested category->sub-category->article menu
ela re… Sorry to hijack your thread, i have no clue how to create new topic.
I looked at your solution, I found a simpler one, but with section>Category>article
<ul class="topnav">
<li><txp:section name="home">Home</txp:section></li>
<li><txp:section name="about_us">About Us</txp:section></li>
<li><txp:section name="products">Products</txp:section>
<txp:article_custom category="products" wraptag="ul" class="subnav" >
<li><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>
</li>
<li><txp:section name="gallery">Gallery</txp:section></li>
<li><txp:section name="clients">Clients</txp:section></li>
<li><txp:section name="contact-us">Contact Us</txp:section></li>
</ul>Can anyone provide me a better solution for my method, and include the active_class parameter.
Thanx
Last edited by Dimitri (2010-10-31 07:33:27)
<txp:way_too_cool />
Offline
Re: [howto] Nested category->sub-category->article menu
<ul class="topnav">
<li<txp:if_section name="home"> class="active"</txp:if_section>><txp:section name="home">Home</txp:section></li>
<li<txp:if_section name="about_us"> class="active"</txp:if_section>><txp:section name="about_us">About Us</txp:section></li>
<li<txp:if_section name="products"> class="active"</txp:if_section>><txp:section name="products">Products</txp:section>
<txp:article_custom category="products" wraptag="ul" class="subnav" >
<txp:if_individual_article><txp:variable name="artid" value='<txp:article_id />' /></txp:if_individual_article>
<li<txp:if_article_id id='<txp:variable name="artid" />'> class="active"</txp:if_article_id>><txp:permlink><txp:title /></txp:permlink></li>
</txp:article_custom>
</li>
<li<txp:if_section name="gallery"> class="active"</txp:if_section>><txp:section name="gallery">Gallery</txp:section></li>
<li<txp:if_section name="clients"> class="active"</txp:if_section>><txp:section name="clients">Clients</txp:section></li>
<li<txp:if_section name="contact-us"> class="active"</txp:if_section>><txp:section name="contact-us">Contact Us</txp:section></li>
</ul>I think that should give you the “active” classes you want.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#9 2010-10-31 10:27:11
- Dimitri
- Member
- From: Johannesburg
- Registered: 2010-10-31
- Posts: 129
Re: [howto] Nested category->sub-category->article menu
I think that should give you the "active" classes you want.
The code you post above is excellent for a newbie likeme, thanx for you time.
It should work but in my CSS, it is “ul.topnav li a.active”
and I prefer to have the active class in the link, not on the <li class=“active”>
I will find a way of doing it. I will try it later and let you know.
Otherwise you have a better solution cus of ur experience.
<txp:way_too_cool />
Offline
Re: [howto] Nested category->sub-category->article menu
Actually, just thinking it through further, and if you want to add the class to the links I believe that for the individual article links you don’t need that variable and you could use:-
<li><txp:permlink<txp:if_article_id> class="active"</txp:if_article_id>><txp:title /></txp:permlink></li>and for the section links you do need to turn the link “on” but I also think you could just use the tag on it’s own so something like:-
<li><txp:section link="1" name="home"<txp:if_section> class="active"</txp:if_section>>Home</txp:section></li>I think that second block should work but if it doesn’t it is simply a case of adding the “name=” attribute to the <txp:if_section /> tag.
Last edited by thebombsite (2010-10-31 11:51:12)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#11 2010-10-31 11:52:56
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: [howto] Nested category->sub-category->article menu
Or, using the section_list tag:
<ul class="topnav">
<txp:section_list break="li" active_class="active" sections=",about_us" include_default="1" default_title="Home">
<txp:section title="1" link="1" />
</txp:section_list>
<txp:section_list break="li" active_class="active" sections="products">
<txp:section title="1" link="1" />
<txp:if_individual_article>
<txp:article_custom category="products" wraptag="ul" break="li" class="subnav">
<txp:permlink class='<txp:if_article_id>active</txp:if_article_id>'><txp:title /></txp:permlink>
</txp:article_custom>
<txp:else />
<txp:article_custom category="products" wraptag="ul" break="li" class="subnav">
<txp:permlink><txp:title /></txp:permlink>
</txp:article_custom>
</txp:if_individual_article>
</txp:section_list>
<txp:section_list break="li" active_class="active" sections="gallery,clients,contact-us">
<txp:section title="1" link="1" />
</txp:section_list>
</ul>BTW, this forum is for ready-made how-tos, questions go in How do I… :)
Last edited by els (2010-10-31 11:56:15)
Offline
Re: [howto] Nested category->sub-category->article menu
That’s getting clever Els. ;)
My only criticism is that I don’t think you need the comma in the “sections” for the first <txp:section_list /> block. I think you will end up with 2 default links. If you agree and modify the code you can delete this comment (you can do that can’t you?).
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline