[TYPO3-dev] HMenu with specific classes per branch

[Christopher Torgalson]

Hi,

2010/4/23 Éric Thibault <Eric.Thibault at dc.ulaval.ca>:
> I have a small problem.  I'm looking to associate a specific style class to each branch of my HMENU.  For now I'm using optionsplit and it's working as expected.  My problem is that if my client hides a branch,  the style classes bellow the hidden branch get reassigned!
>
> Is there a way to lock my style classes to specific branches?
>
> What I have with optionsplit:
>
> <ul>
> <li class="A">branch A</li>
> <li class="B">branch B</li>
> <li class="C">branch C</li>
> <li class="D">branch D</li>
> </ul>
>
> If I remove branch C... optionsplit gives me :
>
> <ul>
> <li class="A">branch A</li>
> <li class="B">branch B</li>
> <li class="C">branch D</li>
> </ul>
>
> The optionsplit assigned class C to my branch D!!!
>
> I would like to have :
> <ul>
> <li class="A">branch A</li>
> <li class="B">branch B</li>
> <li class="D">branch D</li>
> </ul>
>
> Is that possible?

Well, given that what you want is classes per branch that don't vary,
I'd use something about the branch to generate the class
names...something like the uid of the parent page. Given that TMENU's
wrapItemAndSub property now has stdWrap, you should be able to do
something like this:

  ### Create a class name like c123 where 123 is the uid of the page
  ### (we need the 'c' because class names can't start with a digit)
  wrapItemAndSub.dataWrap = <li class="c{field:uid}">|</li>

So if your A, B, C and D pages have uids 100, 200, 400 and 400, your
html would look like this:

  <ul>
    <li class="c100">branch A</li>
    <li class="c200">branch B</li>
    <li class="c300">branch C</li>
    <li class="c400">branch D</li>
</ul>

With branch C hidden:

  <ul>
    <li class="c100">branch A</li>
    <li class="c200">branch B</li>
    <li class="c400">branch D</li>
  </ul>

Finally, you should just be able to do a find and replace in your CSS
to make it all work out properly.

-- 
Christopher Torgalson
http://www.typo3apprentice.com/