[Typo3] Differently styled Site-Sections in the menu

[Georg Rehfeld]

Hi Christopher and Joey, all,

>>Still listening...

pleased to meet you ...

I finally found a solution (see below)!

I now abuse the abstract field to let the editors insert a class name
"orange" or "red". And I have added 'abstract' via the install tool to
the $TYPO3_CONF_VARS["FE"]["addRootLineFields"] setting (for the slide
on that field to work at all!!!).

My frustration yesterday resultet from the fact, that inside the TS for
menu generation one MAY access DB fields of the target page, e.g.:

   ATagTitle.field = abstract

but the levelfield feature of the getText datatype does work from the
current page instead of the target page:

   ATagTitle.data = levelfield : -1, abstract, slide

fetches the abstract field from the _current_ page (and up to the root,
when empty) instead of along the rootline of the _target_ page.

My intention was to explicitely set "orange" as a HTML class to the
menu <a> tag for the page, where it is set into 'abstract' AND ALL
child pages of that page ... no way with TS, I believe.

My brain damage was: I totally forgot about the _Cascading_ in CSS!
It is simply not neccessary to _slide_ at all in the menu for my task
at hand. The part of highlighting the child pages may be easily done
with CSS, when the "orange"/"red" is applied to the <li> tag instead
of the <a> tag.

For a running sample have a look at http://heizung-einfach.de/ (limited
time) and notice the "orange" formatting of the 'Heizung + Warmwasser'
subsection and the "red" formatting of 'Abgassysteme'. If you click on
'Heizung + Warmwasser', that section expands, all "orange" except for
the 'K4' entry, which is "red" by intention.

My TS code for the menu follows, it generates valid XHTML 1.0
transitional:

------------------------------------------------------------
### Construct the main menu as a nested unordered list.
### It has level1 - level4 entries.
### All formatting will be done via CSS.
lib.menu1 = COA
lib.menu1 {
   ### the menu object itself, starting off the site root
   10 = HMENU
   10.entryLevel = 0

   ### Level1 entries are simple text menu entries,
   ### (formatted via CSS to run down the left side of the page)
   10.1 = TMENU
   10.1 {
     ### Don't really like unneccessary scripting.
     noBlur = 1
     ### Current item should be unlinked and formatted differently.
     CUR = 1
     ### Active items above current item should be formatted differently.
     ACTIFSUB = 1
     ### This level is always expanded to show next level entries
     expAll = 1
   }

   ### Base formatting of menu entries as list items.
   10.1.NO {
     ### We abuse the 'abstract' field to hold a highlight class name
     before.field = abstract
     ### Need the 'special' wrap to have 2 class names space separated
     ### Note, that with no 'abstract' setting the class name will have
     ### a space appended. Seems to do no harm, the HTML still validates
     before.noTrimWrap = |<li class="menu1-lev1-no |">|
     ### Closing li tag must be spit out after all sub items
     wrapItemAndSub = |</li>
   }

   ### Current menu item is unlinked and marked as -cur
   10.1.CUR {
     ### No <a> tag please
     doNotLinkIt = 1
     ### Fetch the abused 'abstract' field
     before.field = abstract
     ### Have a <span> tag instead of the <a> tag for CSS
     before.noTrimWrap = |<li class="menu1-lev1-cur |"><span>|
     after = </span>
     wrapItemAndSub = |</li>
   }

   ### Active items above current to be formatted differently
   10.1.ACTIFSUB {
     before.field = abstract
     before.noTrimWrap = |<li class="menu1-lev1-act |">|
     wrapItemAndSub = |</li>
   }

   ### Wrap the whole level1 menu inside an unordered list
   10.1.wrap = <ul class="menu1-lev1">|</ul>

   ### Level2 entries are simple text menu entries also.
   ### Formatted slightly different as level1 via CSS. Almost identical
   ### code as for level1, only all occurrences of 'lev1' are replaced
   ### by 'lev2'. Could have be done with 10.2 < 10.1 and then only
   ### changing the appropriate places. Explicitly here for clarity.
   10.2 = TMENU
   10.2 {
     noBlur = 1
     CUR = 1
     ACTIFSUB = 1
   }

   10.2.NO {
     before.field = abstract
     before.noTrimWrap = |<li class="menu1-lev2-no |">|
     wrapItemAndSub = |</li>
   }

   10.2.CUR {
     doNotLinkIt = 1
     before.field = abstract
     before.noTrimWrap = |<li class="menu1-lev2-cur |"><span>|
     after = </span>
     wrapItemAndSub = |</li>
   }

   10.2.ACTIFSUB {
     before.field = abstract
     before.noTrimWrap = |<li class="menu1-lev2-act |">|
     wrapItemAndSub = |</li>
   }

   10.2.wrap = <ul class="menu1-lev2">|</ul>

   ### Copy code for levels N from level2, only change all
   ### 'lev2' to 'levN'
   ...
}
------------------------------------------------------------

And the CSS for formatting the highlights:

------------------------------------------------------------
ul li.orange a { background-color: #FEC; }
li.orange li a { background-color: #FEC; }
ul li.red a { background-color: #FCC; }
li.red li a { background-color: #FCC; }
ul li.orange span { background-color: #FEC; }
li.orange li span { background-color: #FEC; }
ul li.red span { background-color: #FCC; }
li.red li span { background-color: #FCC; }
...
------------------------------------------------------------

>>Can you show me an exact sample of the required html/css? I've never
>>run into a text-based menu that I just could not build with
>>HMENU/TMENU...maybe this is the one though :)

It is not!

Feel free to look at the source of the above mentioned link to see the
complete HTML and CSS :-).

"orange" and "red" shall emphasize products of special interest, e.g.
this week my customer wants to sell especially the "K4" product in the
subsection "Heizung + Warmwasser". Next week there might be no highlight
at all and the week after he might want to promote the whole subsection
"Abgassysteme". Now he can do so easily (both shown together).

> Or even better: Could you provide us with some screenshots that show what
> you want to achieve. Or is there another site showing the same behaviour
> online?

Again, see the running sample :-).

> Your description reminds me of something we did for www.partymakers.de where
> they have many differently colored sections. Have look at it and tell me if
> this is something similar to your problem.

It is similar, as you might see, but partymakers seems to be
easily be done with optionsplit (fixed colors for different sections
as far as I can see?). I have to respect often changing highlighting
demands to be done by the editor without my intervention changing the
TypoScript of the site.

Best regards and thanks for your patience.
Again, much thanks to Christopher for his excellent CSS ideas.
Maybe we/I should make a 'Howto' out of this?

Georg, happy
-- 
  ___   ___
| + | |__    Georg Rehfeld      Woltmanstr. 12     20097 Hamburg
|_|_\ |___   georg.rehfeld.nospam at gmx.de    +49 (40) 23 53 27 10