Textpattern CMS

#1 2009-11-18 16:51:07

matthijs

Member

Registered: 2008-12-15

Posts: 32

Active class in submenu

I have this submenu for a section “about-us. I can use the if_article_id tag to create an active class to be able to style it with css

<ul id="sub" class="menu">
<li><a href="/about-us/vision" <txp:if_article_id id="76">class="selected"</txp:if_article_id> >Vision</a></li>
<li><a href="/about-us/people" <txp:if_article_id id="77">class="selected"</txp:if_article_id> >People</a></li>
<li><a href="/about-us/office" <txp:if_article_id id="80">class="selected"</txp:if_article_id> >Office</a></li>
</ul>

However, my problem is:
If someone arrives at the first page in the section:
/about-us/
they get shown the first article of the section, in this case “vision”
Now that works, only in this case the class=“selected” is not added, because I’m not actually on article_id 76 (of the “vision” article). Only after clicking the actual subpage, and you arrive at /about-us/vision, is the class=“selected” shown.

The only alternative I could think of, is

<ul class="menu">
<txp:if_article_id id="80">
<li><a href="/about-us/vision">Vision</a></li>
<li><a href="/about-us/people">People</a></li>
<li><a href="/about-us/office" class="selected >Office</a></li>
<txp:else />
	<txp:if_article_id id="77">
		<li><a href="/about-us/vision">Vision</a></li>
		<li><a href="/about-us/people" class="selected >People</a></li>
		<li><a href="/about-us/office">Office</a></li>
	<txp:else />
		<li><a href="/about-us/vision" class="selected >Vision</a></li>
		<li><a href="/about-us/people">People</a></li>
		<li><a href="/about-us/office">Office</a></li>
	</txp:if_article_id>
</txp:if_article_id>
</ul>

However, you can see that if the menu gets longer, this explodes in complexity and length.

So what I need is some kind of way of saying:

<li><a href="/about-us/vision"
"If ( on page Vision ) or ( in section about-us but not in any other page) then show class="selected".
>Vision</a></li>

Off-topic: how do I post code here? bc. or bc.. or bq. is not working?

(edit: yes, it works, but you need a blank line before and after it: FAQ ;) -Els)

Last edited by els (2009-11-18 20:50:06)

#2 2009-11-18 19:14:27

whaleen

Member

From: Portland

Registered: 2006-05-11

Posts: 373

Website

Re: Active class in submenu

If you used categories instead you could do the following.

<li><a href="/about-us/vision" <txp:if_category name="vision">class="selected"</txp:if_category> >Vision</a></li>
<li><a href="/about-us/people" <txp:if_category name="people">class="selected"</txp:if_category> >People</a></li>
<li><a href="/about-us/office" <txp:if_category name="office">class="selected"</txp:if_category> >Office</a></li>

You could 1) add those three categories and 2) assign them to each of your articles and 3) plop that snippet into your template.

A more common approach to what your after… maybe. There are ways to further what you had going to get the same visual results. None come to mind at the moment.

Off-topic: how do I post code here? bc. or bc.. or bq. is not working?

Put space between bc., bq., etc… and the content? Know how Textile works.

---

txtstrap (Textpattern + Twitter Bootstrap + etc…)

#3 2009-11-18 21:02:06

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: Active class in submenu

You would need a plugin to get /section/category URLs. Here’s another way, still a bit longish, but shorter than your original code:

<li><a href="/about-us/vision"<txp:if_section name="about-us"><txp:if_article_list> class="selected"<txp:else /><txp:if_article_id id="76"> class="selected"</txp:if_article_id></txp:if_article_list></txp:if_section>>Vision</a></li>

#4 2009-11-19 11:53:31

matthijs

Member

Registered: 2008-12-15

Posts: 32

Re: Active class in submenu

Thanks for the solutions. Els’ solution works very good. Even if it’s a bit longish, it’s only one line of code, and does just what I wanted