Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2006-07-14 15:21:27

jrphelps
Member
From: Fort Worth, TX
Registered: 2006-07-13
Posts: 30

Re: Current Page Navigation Highlighting

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;

<code>#nav li.id_12 a, #nav li.id_16 a, etc { }</code>

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

Graham

Offline

#12 2006-07-14 15:30:41

jrphelps
Member
From: Fort Worth, TX
Registered: 2006-07-13
Posts: 30

Re: Current Page Navigation Highlighting

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)

Offline

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

jrphelps
Member
From: Fort Worth, TX
Registered: 2006-07-13
Posts: 30

Re: Current Page Navigation Highlighting

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.

Offline

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

jrphelps
Member
From: Fort Worth, TX
Registered: 2006-07-13
Posts: 30

Re: Current Page Navigation Highlighting

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?

Offline

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

mwillse
Member
From: brooklyn, ny
Registered: 2006-06-26
Posts: 83
Website

Re: Current Page Navigation Highlighting

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)

Offline

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

pieman
Member
From: Bristol, UK
Registered: 2005-09-22
Posts: 491
Website

Re: Current Page Navigation Highlighting

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?

Offline

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

wet
Developer
From: Lenzing, Austria
Registered: 2005-06-06
Posts: 3,267
Website

Re: Current Page Navigation Highlighting

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

Offline

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

FireFusion
Member
Registered: 2005-05-10
Posts: 698

Re: Current Page Navigation Highlighting

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;
}

Offline

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

pieman
Member
From: Bristol, UK
Registered: 2005-09-22
Posts: 491
Website

Re: Current Page Navigation Highlighting

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)

Offline

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

mwillse
Member
From: brooklyn, ny
Registered: 2006-06-26
Posts: 83
Website

Re: Current Page Navigation Highlighting

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.

Offline

Board footer

Powered by FluxBB