Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2010-04-04 06:05:23

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,077
Website GitHub Mastodon Twitter

[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

#2 2010-04-07 20:45:40

pompilos
Member
From: Spain
Registered: 2005-06-07
Posts: 114
Website

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

#3 2010-04-08 05:32:06

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,077
Website GitHub Mastodon Twitter

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

#4 2010-04-23 14:23:41

mattmikulla
Member
From: Nashville Tennessee
Registered: 2004-08-25
Posts: 281
Website

Re: [howto] Nested category->sub-category->article menu

Anyone have an example of this in action?


Art Rogue – Fine Art Photography

Offline

#5 2010-04-23 14:36:54

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,077
Website GitHub Mastodon Twitter

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

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#6 2010-07-27 23:50:57

aswihart
Member
From: Pittsburgh, PA
Registered: 2006-07-22
Posts: 345
Website

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

#8 2010-10-31 08:37:42

thebombsite
Archived Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

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

#10 2010-10-31 11:49:52

thebombsite
Archived Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

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

#12 2010-10-31 12:02:56

thebombsite
Archived Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

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

Board footer

Powered by FluxBB