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

what they saidwho said it

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
DannyB

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 :::

diversions :::

45+ Amazing Insect Shots in Photography
Insects are one of the most fascinating creatures on earth. There are more than 800, 000 species of insects in the world.
Grayscale color | Stroep Blog
This is how I create a grayscale color in actionscript 3.
Google Flash API
This is great ... google has made this easy ... stay tuned to see what i am working on ...
25 Free Mac Apps That Will Boost Your Productivity
There are many applications that can help you work faster and efficiently. Though, not many applications come cheap.
you still want more »