Current Page Navigation Highlighting

jrphelps · 2006-07-17 21:10:06

Wet, here is another question: Would it be possible to have the sub-nav links link to sections rather than articles? For instance, I want to have About > Portfolio. But, I was thinking I would make my Portfolio a section of posts.

Hopefully that makes some sense.

jrphelps · 2006-07-17 21:14:51

Also, unless I misunderstood the directions, the sub-nav items show up in the article list as well for the section. Any way to stop that as well?

mwillse · 2006-11-29 23:43:54

Here is a method to highlight the current page in a submenu that requires no php or plugins. Pure css.

In short, the solution is to declare a style in the page’s head using the current page’s article id number. This style corresponds with an id given to every item in our list. In this case, we’ll make it red, and prevent the cursor from changing when hovered over this link.

1) In the head of your page, declare the style:

ul#submenu a#id<txp:page_url type="id" /> { color:red; cursor:default; }

Since CSS requires that an id must begin with a letter instead of a number, we first write “id” and then have Txp insert the article’s id number. From the code above, Txp will generate the page source like so:

ul#submenu a#id33 { color:red; cursor:default; }

Note that we can’t use the article’s title because it might include spaces. And we can’t use the url-only title, because as of 4.0.3, it’s not possible to generate without the full url.

2) Now we just need to mark the items in our submenu. The form to generate each item looks like:

<li><a id="id<txp:article_id />" href="<txp:permlink />" ><txp:title /></a></li>

This will yield:

<li><a id="id33" href="/slug" >Page Title</a></li>

That’s it! We generate a tiny bit of excess html declaring an id for each item, but we never need to update our stylesheet or remember to add a custom field. We don’t need to worry about plugin updates, and we avoided any php hacks.

Last edited by mwillse (2006-11-29 23:45:39)

pieman · 2007-03-23 22:48:41

wet wrote:

Second level article form nav-sub
<li<txp:php>
# $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…

Wet – is it possible to change a variable or two and extend this method to highlight the currently viewed category in the sub-navigation of a category page?

wet · 2007-03-24 07:04:47

Isn’t it sufficient to set the active_class attribute for txp:category_list?

FireFusion · 2007-03-24 08:04:09

I use CSS and the <txp:section /> tag. First put this as the body tag…

<body class="<txp:section />">

Then I use semantic, meaningfully mark-up for the main navigation.

<!-- Navigation -->
<div id="nav_main">
<h2>Site features</h2>
<ul id="nav_sections">
   <li id="nav-home"><a href="/home">home</a></li> 
   <li id="nav-about"><a href="/about">about</a></li> 
   <li id="nav-project"><a href="/project">project</a></li> 
   <li id="nav-contact"><a href="/contact">contact</a></li> 
</ul>
</div>

And in the CSS I do the following…

.default #nav-home, 
.about #nav-about,
.project #nav-project, 
.contact #nav-contact{
	font-weight: bold;
}

pieman · 2007-03-25 18:13:57

wet wrote:

Isn’t it sufficient to set the active_class attribute for txp:category_list?

Thanks Robert, I didn’t know about that attribute… but in this case it’s not quite what I’m looking for.

I want to list the cagetory links as headings with relevant articles listed below each. The categories themselves won’t change, so I was planning to just hard-code the links into the page template.

But I’d also like to represent an “active” state on the category link – both in a category page or in an article page within a category (I’ve customised the URLs as /section/category1/title).

@ FireFusion
thanks for the suggestion… that’s the method I already use for the section menu, but it’s not appropriate in this case.

Last edited by pieman (2007-03-25 18:15:42)

mwillse · 2007-03-25 19:46:34

pieman, you might have other reasons why the body class method isn’t appropriate, but in case you didn’t know, you can assign two distinct classes on one element. just separate them with a space like so: class="sectionclass categoryclass". this give you tremendous freedom to apply styles throughout the page and site, w/o ever needing to revisit your pages and forms.

wet · 2007-03-26 18:37:05

pieman wrote:

But I’d also like to represent an “active” state on the category link – both in a category page or in an article page within a category (I’ve customised the URLs as /section/category1/title).

My suggestion assumes that you do not hardcode your category links but include a txp:category1/2 tag in the article list form, plus an article list sorted by either category #1 or #2. To achieve category headings whenever the article category changes while the list is rendered, embrace txp:category with txp:if_different.

A sample article list form using category #1 might look like this:

<txp:if_different>
<h2<txp:php>
# $pretext contains article properties according to current URL
# compare to *current* category in article list
global $thisarticle; global $pretext;
$isactive = ($pretext['c'] == $thisarticle['category1']) ? ' class="active"' : '';
echo $isactive;
</txp:php>> 
<!-- NB the second closing angle bracket in the previous line: This is part of the opening H2 tag from the very start -->
<txp:category1 title="1" link="1" />
</h2>
</txp:if_different>

This work for a list page for all categories. I do not quite understand how you wanted to highlight the active category on a single article page, as any article wouldn’t be rendered at all if it wasn’t in the active category anyway…

pieman · 2007-03-27 09:27:36

much appreciated Robert…
Because I’ve modified the URL scheme (with a combo of sgb_url_handler and .htaccess) I couldn’t output the categories with the <txp:category1 title="1" link="1" /> tag. My hard-coded solution is much less elegant I admit, but it’s fine for the purposes of this job.
thanks very much for your help

btw.
My reasoning for highlighting the active category option in the sub-nav is just to give a visual clue to the hierarchy, much like a breadcrumb trail would. Hope that makes sense… I think maybe I don’t explain myself so well sometimes. I’ll post the link when it’s finished and maybe it will be clearer.

Textpattern CMS

Textpattern CMS support forum

#13 2006-07-17 21:10:06

Re: Current Page Navigation Highlighting

#14 2006-07-17 21:14:51

Re: Current Page Navigation Highlighting

#15 2006-11-29 23:43:54

Re: Current Page Navigation Highlighting

#16 2007-03-23 22:48:41

Re: Current Page Navigation Highlighting

#17 2007-03-24 07:04:47

Re: Current Page Navigation Highlighting

#18 2007-03-24 08:04:09

Re: Current Page Navigation Highlighting

#19 2007-03-25 18:13:57

Re: Current Page Navigation Highlighting

#20 2007-03-25 19:46:34

Re: Current Page Navigation Highlighting

#21 2007-03-26 18:37:05

Re: Current Page Navigation Highlighting

#22 2007-03-27 09:27:36

Re: Current Page Navigation Highlighting

Board footer