liebes forum,
ich möchte bei meinem menue gerne das jeweils zweite wort im hoverzustand cyan einfärben.
allerdings nur die letzten beiden punkte. also quasi so:
Cyan
Link Cyan
Link Cyan
um es erstmal generell hinzubekommen, führte eine zuweisung der klasse per option split leider nicht zum erfolg:
nav = HMENU
nav{
special = list
special.value = 3,4,5
wrap = <ul>|</ul>
1 = TMENU
1 {
NO = 1
NO.allWrap = <li>|</li> |*| <li class="cyan">|</li>
CUR = 1
CUR < .NO
ACT = 1
ACT < .CUR
}
}
per css und nth-child à la "#navMain ul li a:hover nth-child(2){color:cyan;}" ebenfalls nicht.
muss ich anders herangehen?
im anhang noch ein screenshot wie ich es mir vorstelle (also im hover zustand).
lieben dank für Eure tips!
hhheidi 🙂
Versuch es doch mal mit korrektem CSS
#navMain ul li:nth-child(2) a:hover {color:cyan;}
Per Typoscript geht es auch, ist aber deutlich komplizierter,
vor allem, um die eigentlich gewünschte Darstellung zu erreichen.
Ich würde das wohl eher mit jQuery machen, oder es ganz lassen -
viele verschiedene Link-Farben sind der Usability nicht unbedingt förderlich.
danke jenses,
nachdem auch lettering.js nichts gebracht hat, ich habe es jetzt entnervt einfach als normales HTML menue in der layout datei angelegt... :/
Das Problem hier ist, dass Du eigentlich Markup in einem Teil des Titels brauchst. Das ginge mit replacement (ab 4.6), so in etwa:
NO.stdWrap.replacement {
10 {
search = Me
replace = <span class="cyan">Me</span>
}
}
Das funktioniert natürlich nur wenn das zweite Wort immer gleich ist...
Wenn es unterschiedlich ist, dann könnte man den Title mit split am Leerzeichen zerlegen, wieder zusammenbauen und dabei eben beim zweiten Wort den span setzen. Das bau ich jetzt aber nicht auf die schnelle zusammen.
lieben dank, kitsunet!
das sind nochmal anhaltspunkte die ich evtl. selbst weiter recherchieren kann 🙂
also,(zur info falls dies noch jemanden betreffen sollte)
durch einen tip habe ich es jetzt erstmal über den alterntivtitel des menuepunktes selber gemacht
(der kann nämlich mit HTML-tags versehen werden, allerdings scheinen klassen nicht zu greifen.) :
Cyan
<span>Link</span> Cyan
<span>Link</span> Cyan
(im CSS ist für den hoverzustand des Links das cyan zugewiesen, diese formatierung greift dann aber für das vom span-tag umschlossene wort nicht, und somit bleibt wie beabsichtigt nur das zweite wort eingefärbt 🙂 )