6 December 2006

txp:section_list + active_class not good enough

So i wanted my navigation with ul/li and have it styled… i wanted to use textpattern’s built in <txp:section_list />, but alas it couldn’t handle individual id’s for each list item … more problems arouse when i wanted it to hilite the section you were on…

The simpliest method to accomplish this is to just make a <txp_page /> for each section. I don’t have that many sections.. seems easy enough, but what if I want to add a new section? Again … I will problem not have a plethora of sections… so that also seems doable

but, part of being a programmer … is that you devise all these methods that may take more time than just copying and pasting … but the aim is to be easier to maintain.

I only have three <txp_page's />, and i really didn’t want to make a new one for each section, so first things was first … make a MISC form … site-nav ... and put the nav in each of those txp_pages… using <txp:output_form form="site-nav" /> … so now i can make changes to my nav one place, and not worry about it…

That’s pretty straightforward, then with some css voodoo on the ul/li … i replaced the text with images … and voila I have a vertical nav …

Now the tricky part … it’s not really that tricky … it’s just to make me feel good. When i go to each section I want it to be highlighted… again i want to avoid duplication… so i added one change to the form… added an id to the UL that is the current section.

<ul class="nav"> changed to ... 
<ul class="nav" id="ul-<txp:section />">

So now … i know where i am … so in my style sheet i just add a line for each section…

ul#ul-photos li#li-photos a { ... }
etc.

So this basically translates to … IF there is a UL whose ID=UL-PHOTOS then an LI whose ID=LI-PHOTOS then turn me on … So if I were in the technology section , the UL ID=UL-TECHNOLOGY, so the photo nav would not turn on.

So when I add a new section, via textpattern, i just add the necessary lines in the css, and change the one form … ahh simple enough …

Hopefully someone find this useful…

 

comment

This tutorial has been a huge help, with my site needing so many oddball sections I can totally customize further understanding this built in functionality.

2006-12-06
Jack

hey jack … glad to be of service … my job here is done !

2006-12-06
Daniel Bulli2

i found it useful too… very very much!
though dont like the typeface for intro. too scattered and thin to be this big. very spaced out.

2006-12-10
rusha


note: you can only submit after you hit preview


nuff-respec is a weblog written by daniel bulli a senior web programmer in boston, ma.
more >

contact | resume | profile | twitter

recently :::