Content last modified Monday 6 March 2017
hop to #bottom
Categories:
Author:
About It:
Rate it:
  • Helpful?
  • 8 Yes
  • 0 No
Flag it:
Contact Reason [ ? ]

Dynamic Sub Menu with active class

Very Useful for a typical business-style web site with sub-pages in a section.

I searched for quite some time before I found the bits and pieces to put together this recipe for a dynamic sub navigation with a class=“active” attaching itself to the current menu item. This allows you to apply styling to the active menu item without having to hard code the links in your page (template) every time you add an article.

I use the txp:article_custom tag in combination with the rvm_if_this_article plugin to achieve this functionality.

I will give you a step by step scenario to accomplish the desired results. If my illustration seems painfully detailed, it is in an effort to make the information digestible to the novice TXP developer.

The sample scenario:

You have a “section” in your site called “about” which uses an “about” “page” (template).

First install and activate the following plugin: rvm_if_this_article
found here: http://vanmelick.com/txp/rvm_if_this_article.php

Within the “about” “page” you have the following two snippets of code—one for the navigation and one for the article output (novice note: you must have some articles assigned to the “about” “section”):

<ul id="subnav">
  <txp:article_custom form="subnav" limit="99" section="about" sort="Posted asc" />
</ul>

<div id="content"> 
  <txp:article form="static" limit="1" sort="Posted asc" />
</div>

The forms you are calling:

subnav (article-form):

<li<txp:rvm_if_this_article> class="active"</txp:rvm_if_this_article>><a href="<txp:permlink />"><txp:title /></a></li>

static (article-form):

<h2><txp:title /></h2>
<txp:body />

That’s it.

This will create the following html for your page (substitute your own articles).

<ul id="subnav">
  <li><a href="http://dynamicnav.local/about/about-article1">About Article#1</a></li>
  <li><a href="http://dynamicnav.local/about/about-article2">About Article#2</a></li>
  <li class="active"><a href="http://dynamicnav.local/about/about-article3">About Article#3</a></li>
</ul>

<div id="content"> 
  <h2>About Article#3</h2>
  <p>Article Content...</p>
</div>

Just style your .active links and you’re good to go.

btw: if there is a better way to do this now please post a tip in Texpattern Resources.
__________________________________________________________________

Side note: It beats adding the following type of hard-code to my template every time I create a new article just to get the class=“active” effect.

<li>
<a href="<txp:site_url />identity/shine-like-stars"<txp:if_article_id id="13"> class="active"</txp:if_article_id>>Shine Like Stars</a>
</li>

Although, it sure was a useful solution when I needed it.

Article Request Count:
Posted here:
31 Oct 2007
Article modified:
08 Nov 2007

Comments/questions? Leave a message in the form.

Your comment will NOT be submitted until you click the 'Submit' button on the next pageload.

Commented (4)

Visualpeople:

You could further automate things with the amazing asy_wondertag plugin

Just wrap your tag in <asy_wondertag> and replace your section name with <txp_section/> in your article_custom tag and you can then use this code on every page — you won’t need a separate template for every section.

example (not sure why the textile code isn’t working):

bc. <txp:asy_wondertag><txp:article_custom form=“subnav” limit=“99” section=”<txp:section/>” sort=“Posted asc” /></txp:asy_wondertag>

hello:

Isn’t this solved very nicely with the if_article_id tag already?

<a href=”<txp:permlink />”<txp:if_article_id> class=“active”</txp:if_article_id>><txp:title /></a>

I think that this plugin will automatically put that CSS class selector there when a certain page is being opened. In your example article’s id number should be informed manually to each and every one link in navigation to achieve same results.

Subscribe to this article's comments RSS feed. [ ? ]   View Recent Comments across the site.

You know you want to visit the Archives.

Browse

Categories


Articles

There are also tag clouds, 'cause those are fun.
Published with Textpattern