[TYPO3-german] Bestimmten Menüeintrag eigenes CSS-Klasse zuweisen

[Heike Herzog-Kuhnke]

Habe gerade gesehen, dass der Link irgendwie zu einem Thread ohne meine 
Antwort führt. aus diesem Grund kopiere ich meine Antwort von dort 
nochmal hier rein...

Ich löse das auf meiner Homepage per CSS. Der Text wird "weggeschoben 
und durch ein Hintergrundbild ersetzt. Ich mache das für alle 
"Hauptpunkte" in meinem Menu.

Im Feld subtitle habe ich jeweils die Id hinterlegt (könnte man auch mit 
einer Konstanten machen)

       page.20.marks.MENU_OBEN = HMENU
       page.20.marks.MENU_OBEN {
         special = directory
         special.value = 7
         expAll = 0
         wrap = <div class = "hlist">|</div>
         1 = TMENU
         1.wrap = <ul>|</ul>
         1.noBlur = 1
         1.NO = 1
         1.NO.wrapItemAndSub.insertData = 1
         1.NO.wrapItemAndSub = <li id="{field:subtitle}">|</li>
         }

Über die id wird dann per css der Rest gesteuert:
(ich nutze YAML, falls jemandem die Begriffe bekannt vorkommen

Hierfür habe ich zwei png-Dateien, die quasi jeden Menueintrag 
enthalten. Diese binde ich per CSS für die Listenpunkte meines Menus ein:

   .hlist ul li {
     /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
     display:inline;
     float:left; /* LTR */
     font-size:1.0em;
     line-height:6em;
     list-style-type:none;
     margin:0;
     padding:0;
   text-indent: -9999px;   <---- hier wird rausgeschubst
   }

   .hlist ul li a,
   .hlist ul li strong {
     background:transparent;
     display:block;
     font-size:1em;
     font-weight:bold;
     margin:0;
     text-decoration:none;
     background-image: url(../../images/hg_topnav_normal.png);
   }

   .hlist ul li a:focus,
   .hlist ul li a:hover,
   .hlist ul li a:active  {background: transparent;
     text-decoration:none; outline: 0 none;
     background-image: url(../../images/hg_topnav_over.png);
}

Jeder Menupunkt hat eine eigene id und damit wird das Bild verschoben:

   #nav .hlist ul li#start a:hover {
          width: 130px;
          background-position: -620px 0px;}
   #nav .hlist ul li#start a:active {
          width: 130px;
          background-position: -620px 0px;}
   #nav .hlist ul li#start strong {
          width: 130px;
          background-position: -620px 0px;}

...

Die Definition für strong steht bei mir noch ungenutzt drin, da mir der 
Effekt reicht und ich bisher noch nicht umgestellt habe, dass die aktive 
Seite anders formatiert wird.

Hoffe es hilft Dir weiter.
Gruß

Heike