Zum Inhalt springen

Schriftfarbe ändern in einem TMENU beim Zustand ACT

Erstellt am 11. März 2008 · 4 Antworten · letzte Antwort am 16. März 2008

Tags: HTML & CSS, Frage

brigitta63 ·

Hallo,

ich möchte gerne in einem TMENU mit 3 Leveln den Menüpunkt (einschließlich dem Obermenüpunkt) andersfarbig anzeigen, wenn ich auf der jeweiligen Seite bin. Mit ACT kann ich eine Klasse vergeben, das funktioniert. Das Menü ist eine Liste (list-style:disc). Wenn ich jetzt im css der Klasse mit color:red ein Textfarbe zuweise, wird nur dieser Punkt vor dem eigentlichen Menüpunkt rot, nicht der Menüpunkt selber. (Ich hoffe, ich habe mich nicht zu umständlich ausgedrückt). Was mache ich falsch, bzw. wie kann ich das Problem anders lösen.

Hier mal Auszüge aus meinem Typoscript und aus meiner css-Datei.

Typoscript:

### UNTERNAVI
UNTERNAVI=COA
UNTERNAVI{
10=HMENU
10{
special=rootline
special.range=2|2
1=TMENU
1.noBlur = 1
1.NO=1
1.NO.linkWrap=<li>|</li>
1.NO.allWrap=<ul class="ebene0">|</ul>
1.ACT<.1.NO
1.ACT.linkWrap=<li class="aktuell">|</li>
}
20=HMENU
20{
entryLevel=2
special=directory
special.value=15
1=TMENU
1.noBlur = 1
1.NO=1
1.NO.linkWrap=<li>|</li>
1.NO.allWrap=<ul class="ebene1">|</ul>
1.ACT<.1.NO
1.ACT.linkWrap=<li class="aktuell">|</li>
2=TMENU
2.noBlur = 1
2.NO=1
2.NO.linkWrap=<li>|</li>
2.NO.allWrap=<ul class="ebene2">|</ul>
2.ACT<.2.NO
2.ACT.linkWrap=<li class="aktuell">|</li>
}
}

und aus der css:

#unternavi{
float:left;
width:150px;
min-height:300px;
margin:20px 0px 20px 0px;
padding:10px;
background-color:#ffffd0;
font-size:85%;
font-weight:600;
text-align:left;
color:#547d33;
}
/*LINKS*/
#unternavi a{
text-decoration:none;
color:#547d33;
}
#unternavi a:hover {
color:silver;
}
/*Formatierung linkes Menü*/
ul.ebene0{
margin:0px 0px 10px 0px;
padding:0;
list-style:none;
}
ul.ebene1{
margin:0px 0px 3px 0px;
padding-left:20px;
list-style:disc;
}
ul.ebene2{
margin:0px 0px 3px 0px;
padding-left:40px;
list-style:disc;
}
.aktuell{
color:#ac0e24;
}

mit
#unternavi a:active {
color:red;
}

habe ich es schon versucht. Aber das ergab nicht den gewünschten Effekt. javascript:emoticon('😢')
javascript:emoticon('😢')
Ich würde mich über jede Hilfe freuen. Probiere schon seit Stunden herum.

Vielen Dank

ra.​s ·

Hallo,

Dein Problem liegt darin, das Du mit der Klasse .aktuell nur die Textfarbe des li-Tags änderst (Klappt ja wohl auch). Während auf all Deine a-Tags immer noch der Style #unternavi a (..:hover, ..:active) zutrifft.
Du musst also die auf die Klasse .aktuell folgenden a-Tags auch mit einem Style versehen.

zB im CSS:
.aktuell a,
.aktuell a:hover,
.aktuell a:active {
color:red;
}

Hm, vielleicht hat das seltsame Folgen für das Menu. Mal ausprobieren. :o)
Sollte dies der Fall sein, kannst Du auch per TS dem a-Tag des entsprechenden Menu-Zustandes ein class-Attribut verleihen:

2.ACT.ATagParams = class="aktuell"

Das CSS sähe dann etwa so aus:

a.aktuell,
a.aktuell:hover,
a.aktuell:active {
color:red;
}

Grüsse
Ralf

brigitta63 ·

Hallo Ralf,

danke für die Tips. Probiere ich heute abend aus. Ich gebe dann Bescheid, ob es geklappt hat.

Viele Grüsse

Brigitta

brigitta63 ·

Hallo,

es funktioniert:-)).

Es sieht jetzt so aus:

1.ACT.ATagParams = class="aktuell"
li.aktuell{
color:#ac0e24;
}
a.aktuell{
text-decoration:none;
color:#ac0e24;
}

Damit wird der komplette aktuelle Pfad rot angezeigt.

Vielen Dank nochmal.

Brigitta