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

recently :::

diversions :::

Using Flash And Staying Standards Compliant
Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park...
A Design is Finished when...
This is probably the hardest part of designing for me.... 23 Pro designers weigh in with their opinions ...
JungleCrazy.com
Find all the Amazon.com products that are discounted by at least 70%
IETester
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
you still want more »