Need individual element id's in a section list.

lyren · 2010-01-20 16:17:43

Hi there,

I have a 5 button navigation bar which needs a unique style for each button. My question is: how to give each list element a unique id/class in a section list.

I can do it without textpattern, but I want to get it working with section_list to take advantage of the active class.

I can’t find anything to fit into this structure to do it:

<txp:section_list default_title=“Lauren O’Donovan” include_default=“1” default_title=“home” sections=“portfolio,cv,blog,contact” wraptag=“ul” break=“li” active_class=“active” />

And when I try to do anything like:

<txp:section_list>
<ul>
<li><a href=”<txp:site_url />”>Home</a></li>
<li><a href=”<txp:site_url />blog/”>blog</a></li>
</ul>
</txp:section_list>

It spits out lots and lots of menus.

I’m sorry if this has been asked before, but I’m literally tearing my hair out and would greatly appreciate any help.

jsoo · 2010-01-20 16:35:37

To use the section name as class:

<txp:section_list default_title="Lauren O'Donovan" include_default="1" default_title="home" sections="portfolio,cv,blog,contact" wraptag="ul" break="li" active_class="active">
<txp:section title="1" link="1" class='<txp:section />' />
</txp:section_list>

However, I just tried it and you lose the active class. Could work it back in using variable and if_variable.

jsoo · 2010-01-20 16:36:37

lyren wrote:

It spits out lots and lots of menus.

That’s because section_list, when used as a container tag, iterates over the tag contents once per section. So in your case it simply spits out the same thing 5 times.

Edit: Els to the rescue as usual. I can never remember how if_section will act inside a section_list tag, that is, whether it will test the page’s section or the section inside the list.

Last edited by jsoo (2010-01-20 20:22:31)

els · 2010-01-20 20:13:07

jsoo wrote:

However, I just tried it and you lose the active class. Could work it back in using variable and if_variable.

If section_list is used as a container tag, the active class needs to be set inside.

<txp:section_list default_title="Lauren O'Donovan" include_default="1" sections="portfolio,cv,blog,contact" wraptag="ul" break="li">
<a class="<txp:section /><txp:if_section name='<txp:section />'> active</txp:if_section>" href="<txp:site_url /><txp:section />/"><txp:section title="1" /></a>
</txp:section_list>

Or, if you want to add the class to the li element:

<txp:section_list default_title="Lauren O'Donovan" include_default="1" sections="portfolio,cv,blog,contact" wraptag="ul" break="">
<li class="<txp:section /><txp:if_section name='<txp:section />'> active</txp:if_section>"><txp:section title="1" /></li>
</txp:section_list>

joebaich · 2010-01-21 05:16:42

Failing the excellent suggestion(s) above, you could also have a look at the cbs_navigation_menu plugin which does everything you want, I think.

lyren · 2010-01-22 10:04:12

Thanks so much to everyone who responded! I learned a lot from all of the solutions, but ended up using the plugin in the end.

Thanks again, I really do appreciate it!

gavnosis · 2010-02-04 19:31:41

I’m having a similar problem here and went down the plugin road, and have this sort of thing, using the excellent cbs plugin:

<txp:cbs_navigation_menu sections="default,about,products,contact" titles="Home,About,Products,Contact" wraptag="ul" class="section_list" break="li" activeclass="active" />

Unfortunately, this attaches the active class to the <a> element not the <li> (I want this for CSS sliding doors)

<ul class="section_list">
<li><a href="http://mysite/">Home</a></li>
<li><a href="http://mysite/about/">About</a></li>
<li><a href="http://mysite/products/" class="active">Products</a></li>
<li><a href="http://mysite/contact/">Contact</a></li>
</ul>

Am I (once again) missing something obvious?

This is the output I require (For the section called ‘products’:

<ul class="section_list">
<li><a href="http://mysite/">Home</a></li>
<li><a href="http://mysite/about/">About</a></li>
<li class="active"><a href="http://mysite/products/">Products</a></li>
<li><a href="http://mysite/contact/">Contact</a></li>
</ul>

els · 2010-02-04 19:46:46

If the plugin adds the active class to the <a> element and it has no settings to change that, my second code example above is an alternative.

gavnosis · 2010-02-04 19:55:18

Thanks Els – Maybe I was asking something really easy and you thought I was trying to do something hard ;-) I’ve tried your code (thankyou!) and tweaked it to the following

<txp:section_list default_title="Home" include_default="1" sections="about,products,contact" wraptag="ul" break="">
<li<txp:if_section name='<txp:section />'> class="active"</txp:if_section>><txp:section link="1" title="1" />
</li>
</txp:section_list>

…which works a treat. All I wanted to be able to do was get this

<ul class="section_list">
<li><a href="http://mysite/">Home</a></li>
<li><a href="http://mysite/about/">About</a></li>
<li class="active"><a href="http://mysite/products/">Products</a></li>
<li><a href="http://mysite/contact/">Contact</a></li>
</ul>

The main thing you’ve confirmed is that I can’t use the plugin!
(And I’m sure it would be easier to hand code sometimes, but does feel elegant !)

Last edited by gavnosis (2010-02-04 20:23:29)

Textpattern CMS

Textpattern CMS support forum

#1 2010-01-20 16:17:43

Need individual element id's in a section list.

#2 2010-01-20 16:35:37

Re: Need individual element id's in a section list.

#3 2010-01-20 16:36:37

Re: Need individual element id's in a section list.

#4 2010-01-20 20:13:07

Re: Need individual element id's in a section list.

#5 2010-01-21 05:16:42

Re: Need individual element id's in a section list.

#6 2010-01-22 10:04:12

Re: Need individual element id's in a section list.

#7 2010-02-04 19:31:41

Re: Need individual element id's in a section list.

#8 2010-02-04 19:46:46

Re: Need individual element id's in a section list.

#9 2010-02-04 19:55:18

Re: Need individual element id's in a section list.

Board footer