TXP Nav Selected State

Posted on: 03.14.2005

People have been inquiring on how I made my navigation selected state logic. I’m no PHP guru and I’m sure that there is a better way to do this but this is how I did it.

TXP Form Code
I use the TXP form output code to spit out my head and foot includes so that every page of my site uses a global header and footer. So, in my head form I have this hunk of code at the very top:

1. if ("<txp:s />" == “default”) {
2. $NavClass1 = " class="selected"";
3. }
4. if ("<txp:s />" == “products”) {
5. $NavClass2 = " class="selected"";
6. }
7. if ("<txp:s />" == “services”) {
8. $NavClass3 = " class="selected"";
9. }
10. if ("<txp:s />" == “careers”) {
11. $NavClass4 = " class="selected"";
12. }
13. if ("<txp:s />" == “links”) {
14. $NavClass5 = " class="selected"";
15. }
16. if ("<txp:s />" == “contact”) {
17. $NavClass6 = " class="selected"";
18. }

This is just simple PHP if statements checking to see what section I’m in. Then a unique variable is set to class=”selected” depending on which section returns true.

The HTML
Then, further down in the form, I have my navigation code. It looks like this:

1. <ul id="nav">
2. <li><a href="/" id="nav-1"<?= $NavClass1; ?>>Home</a></li>
3. <li><a href="/products/" id="nav-2"<?= $NavClass2; ?>>Products</a></li>
4. <li><a href="/services/" id="nav-3"<?= $NavClass3; ?>>Services</a></li>
5. <li><a href="/careers/" id="nav-4"<?= $NavClass4; ?>>Careers</a></li>
6. <li><a href="/links/" id="nav-5"<?= $NavClass5; ?>>Links</a></li>
7. <li><a href="/contact/" id="nav-6"<?= $NavClass6; ?>>Contact</a></li>
8. </ul>

Each anchor tag has a unique variable echo (the same uniques from the previous hunk of code).

Summary
When everything is put together and all of the sections are set up(sections should have the same name as the value in your ==”blah”), TXP will assign a class=”selected” to the appropriate anchor tag. All you need to do is add a ”.selected” class, with your alternative state display code, to your CSS file and you are all set.

I use this same hunk of code on all of my TXP sites.

› Journal Archives