Journal

TXP Current Navigation

18 May 2006 › 7 comments

From time to time, I see in my Mint referral logs that people are still hitting my article on Templating in Textpattern. I won’t go into incredible detail here, since you can just read it for yourself. I just wanted to touch on the navigation portion of that article, because I now use a different method. Previously, I was unknowingly doing something similar to Jon Hicks, but realized recently that there’s a far easier way to do it, which requires considerably less CSS.

So, if you feel like it, read through that old post, and then compare the code provided to the way I do things in Textpattern now. Initially, I was going to post the code right here, but since it gets far too long and line-wraps, I will just provide you a link to a text file, containing the appropriate TXP code. As you can see, that turns out to be a horrible looking mess. However, the way that Textpattern parses its own tags, it actually turns out nice and tidy.

• Navigation_TXP
• Navigation_HTML

When Textpattern sees a tag that begins with txp:, it will automatically replace it with the appropriate HTML. In this case, let’s say for the section of my site named journal, it finds it and replaces the code contained therein. If the current section is not Journal, it will simply replace the whole mess of TXP code with nothing instead. On my index page, there is nothing selected. This way, instead of having a ton of ID or class names added to your body tag, you can just have a simple bit o’ CSS that only styles the current section.

#nav a.current
{
  /* Your code here */
}

Hopefully this will help you out. Sorry for taking so long to write this. I feel bad because I know someone probably did it the old way, and it could’ve been avoided if I wasn’t so lazy in putting off writing this post. Anyway, go forth, and have cleaner HTML and CSS, making Textpattern do the heavy lifting.

Discussion + Dissension

1. #1 trovster

   I think it would be more beneficial if you’re able to add the current class to the list-item, which gives more scope for styling. Then you’d use the following CSS selector.

   #nav li.current a {}

2. #2 Nathan Smith

   Trovster: I don’t really think it matters in the least. People will take and do what they like with this code. My main point was to show the Textpattern side of how things work. The rest are just inconsequential details. So, if that works for you, go right ahead and style your list items until your heart is happy. For my particular site design, styling the current link is what works the best, because as you can see, the li has a border of its own. Anyway, I appreciate the suggestion, but it’s really not the point of what I was trying to explain.

3. #3 Terry

   Hey Nathan,

   I’ve been using that same route myself lately – I agree, why not let TXP do the heavy lifting. Glad to see it’s now been documented for the community.

   Nonetheless, there are times where it seems just as easy to do it the other way, and not worry about a few extra lines of text in your CSS file. Whatever floats your boat, eh!

4. #4 Nathan Smith

   Terry: I prefer this method, because then you can have navigation indicators for sections that you might not actually want everyone to be aware of. It’s not likely that people would be digging through your CSS just for that, but this way it is a bit less likely. Either way, you have to put TXP tags in the mix.

5. #5 Darren

   I just wanted to say that Nathan is a great warcraft 3 player

6. #6 Nathan Smith

   Darren: Haha, a bit off topic, but thanks. What he didn’t mention is I’m so good that I lost an entire army to computer AI controlled enemy “creeps.”

7. #7 Darren

   Yeah, but we got our revenge! Yesss

Comments closed after 2 weeks.