Current Page Navigation Highlighting

msteinruck · 2006-07-12 20:58:12

I have a site where my main nav is at the top and the subnav appears in each major section in the left sidebar. (Pretty standard stuff) My sections are set up something like this: about, journal, news.

The pages of the site are mostly static, so I used the URL-Only title to generate the URL of the site. So, for example, the mission statement URL reads something like this: www.mysite.com/about/mission

The styles are set up for that subnav hover, but I want to have the subnav menu item highlighted when I’m on the current page. (In this case, that would be mission)

I’ve looked at a lot of plugins, but nothing seems to fit the bill because they’re all section specific or the link names are generated based on the article titles, so there’s no way to control what navigation items appear.

Does anyone have a tricky way that they’ve used to do current page navigation highlighting? All I really need to do is somehow add a class or id to the LI of the list item when I’m on the page. I’d write my own plugin if I knew how, but I have no clue how.

els · 2006-07-12 21:18:21

glx_hl_current?

jakob · 2006-07-12 21:18:22

Not sure if I follow you but there is this CSS-based method which uses a unique body id (for instance the URL-only title). I use this to do a similar thing for highlighting section navigation.

Here’s a link to how to make a txp_urltitle.

msteinruck · 2006-07-12 22:06:37

Els: glx won’t work because it only highlights the section. I’ve got that covered.

jakob: Good ideas, but all I need to do is add a class or id like class=“active” to those subnav items. I don’t need each one to have a specific ID (like I have on the LIs in the main nav for highlighting). I just want TXP to be able to tell where I am and add a class to the corresponding subnav item.

Does that make more sense?

els · 2006-07-12 22:18:22

msteinruck wrote:

Els: glx won’t work because it only highlights the section. I’ve got that covered.

It also highlights the current article.

wet · 2006-07-13 05:00:50

Two way menu highlighting without plugin.

jakob · 2006-07-13 05:29:54

very neat, wet!

msteinruck · 2006-07-13 13:35:46

wet,
That is very cool, but could you possibly break it down a little bit for the technically challenged among us (me!)? I’ve got it working to the point that it pulls in all of the article titles from the section, but I don’t want all of the article titles to appear that are in the section. I also need to be able to change the order of the navigation items. Does this allow for that in some way and I’m just missing it?

Sorry, I’m just not following exactly what your code does and how I can work with it. On the upside, the nav items are highlighted when I get to the corresponding page. That’s positive. If I could just get the rest working now!

Thanks!

wet · 2006-07-13 19:03:59

Ok, I’ll try to sort this out line by line.

First and second level menu based on section/article hierarchy

<ul id="nav">
Start first level navigation list: named sections, manually chosen in the desired deliberate order.

<li <txp:if_section name=",article">class="active"</txp:if_section>>
If current section is “default”, i.e. empty, or section equals “article”, give this li the class “active”. Else leave it class-less. Hook suitable CSS for highlight on #nav li.active.

<txp:link_to_home>Home </txp:link_to_home>
First navigation item: Link to home

<txp:if_section name=",article"><ul id="nav-2"><txp:article_custom sortby="custom_1" sortdir="asc" section="article" listform="nav-sub" /></ul></txp:if_section></li>

Inside first level menu item 1, render Level-2 menu:

If active section is “default” or “article”, list all articles in that section in a nested ul with the id nav-2
Sort this listing by custom_1 in order to give articles “weight” in the menu: The higher the value, the later it is listed. Manual entry of this value at each article required.
Use a form named “nav-sub” for individual menu entries. This form is explained below.

<li <txp:if_section name="seminare,seminarkalender">class="active"</txp:if_section>><txp:zem_link section="seminare">Seminare </txp:zem_link>
Same as “link_to_home”, but this time it links to the second section in the desired order, and highlights if the current section is either the one linked (“seminare”) or a related one(“seminarkalender”). This is just a special case required by this type of content.

<txp:if_section name="seminare,seminarkalender">
<ul id="nav-2"><txp:article_custom sortby="custom_1" sortdir="asc" section="seminare" listform="nav-sub" /></ul>

Again: Second level menu for the second entry in the first level menu. Nothing new here.

Second level article form `nav-sub`

<li<txp:php>
Each entry is a list item which get a class attribute “active” when the current article on the page matches the one which is linked to by this very menu entry. This requires a little PHP plus access to Textpattern’s interior global variable carrying the decoded URL pretext.

# $pretext contains article properties according to current URL
# compare to *current* article in nav list
global $thisarticle; global $pretext;
$isactive = ($pretext['id'] == $thisarticle['thisid']) ? ' class="active"' : '';
This is the point where we decide if the id number of the current list item $thisarticle['thisid'] (i.e. a link to an article) equals the article’s id which is currently rendered on the page which can be found in $pretext['id'].

echo $isactive;
This either spits out the class="active" attribute, or an empty string, as determined in the previous line.

</txp:php>>
Magic end here…

<txp:zem_link title="%s">
Menu entry: Link to article

<txp:chh_if_data><txp:custom_field name="menu-text" />
A menu text can be defined in a custom article field. Use it , if present.

<txp:else /><txp:title /></txp:chh_if_data>
Otherwise, use the article’s title.

</txp:zem_link></li>
Menu entry complete.

Phew…

bancroft · 2006-07-14 12:00:00

Could you not do something like this?

<code><li class=“id_<txp:article_id />”><a href=”“>Title</a></li></code>

and the CSS something like;

I haven’t tested it so it may be way off, just a 2p worth.

Graham

jrphelps · 2006-07-14 15:21:27

The idea is to have a different style for the <li> element when that particular link is displayed. Your code would be good for styling each individual link on a global scale.

bancroft wrote:

Could you not do something like this?

<code><li class=“id_<txp:article_id />”><a href=”“>Title</a></li></code>

and the CSS something like;

I haven’t tested it so it may be way off, just a 2p worth.

Graham

jrphelps · 2006-07-14 15:30:41

Wet, could you elaborate on whether or not there is a way to make the active class not link to itself? I’m not sure if it is valid code for TXP (I’m still new.), but I thought something like this could do it.

<txp:if_section name=",article"><li class="active">Home<txp:else /><li><txp:link_to_home>Home </txp:link_to_home></txp:if_section><txp:if_section name=",article"><ul id="nav-2"><txp:article_custom sortby="custom_1" sortdir="asc" section="article" listform="nav-sub" /></ul></txp:if_section></li>

Thoughts are welcome.

Edited to put <txp:else /> in the right place.

Last edited by jrphelps (2006-07-14 15:47:56)

Textpattern CMS

Textpattern CMS support forum

#1 2006-07-12 20:58:12