Ich weiß dass es oft behandelt wurde ...
und im Grunde mit OptionSplit ganz einfach gehen müsste.
Sorry.
Aber ich kriege es dennoch nicht auf mein einfaches Menu angewandt :-(
Ich möchte ganz einfach für jeden Menüpunkt eine andere Klasse zuweisen (menu1,menu2,menu3 usw.) für unterschiedliche background-images in den verschiedenen Zuständen
Wie kann ich das in meinem Menu definieren?
(habe wie verrückt mit optionsplit rumprobiert und kein Ergebnis erzielt :-(
temp.hauptmenue >
temp.hauptmenue = HMENU
temp.hauptmenue {
special = directory
special.value = 1
# erstes level
1 = TMENU
1.wrap = <ul class="menu"|</ul>
1{
# no state: normale Formatierung
NO{
wrapItemAndSub = <li>|</li>
}
# act state: gültig von der rootseite bis zur aktuellen Seite
ACT=1
ACT{
wrapItemAndSub = <li class="active">|</li>
}
# cur state: gültig für die aktuelle Seite
CUR=1
CUR{
wrapItemAndSub = <li class="active">|</li>
}
# ifsub state: gültig für seiten die unterseiten haben
IFSUB=1
IFSUB{
wrapItemAndSub = <li>|</li>
}
}
}
Wäre klasse, wenn mir jemand auf die Sprünge helfen könnte.
Ralf
Hallo,
mir ist unklar, was du bezwecken willst.
"Ich möchte ganz einfach für jeden Menüpunkt eine andere Klasse zuweisen (menu1,menu2,menu3 usw.) für unterschiedliche background-images in den verschiedenen Zuständen"
Wenn du wirklich verschiedene Zustände meinst, dann geht das natürlich nicht über Option-Split.
- Wenn du Rollover meinst, dann geht das über reines CSS (a:hover)
- Wenn du NO / ACT etc. meinst, dann muss du es dort definieren (<li class="sub"> etc.)
Wenn du jedem Menü-Eintrag eine andere Klasse zuweisen willst, geht das entweder über Option-Split oder über eine Nummerierung:
NO{
wrapItemAndSub = <li class="menu1">|</li> |*| <li class="menu2">|</li> |*| <li class="menu3">|</li>
}
Allerdings liegt es in der Natur von Optionsplit, dass es nicht wirklich durchzählt, sondern in diesem Beispiel den mittleren Bereich wiederholt, bis das Menü voll ist.
Um wirklich jeden Menüeintrag anders zu kennzeichnen, muss durchgezählt werden. Dazu gibts eine Reihe von Anleitungen im Web:
- register für HMENU
- der Klassiker - aber nicht einfach.
Schau beim zweiten Beispiel vor allem in die Kommentare, das Beispiel von Johannes ist einfacher.
Gruß
Peter,TYPO3 @ lisardo (Augsburg)
Hallo Peter,
erst einmal vielen Dank für die Mühe.
Ja das "normale optionsplit" kenne ich ja von den breadcrump menus.
und dass die Zustände durch die css definiert werden, verstehe ich auch.
ich meine schon, dass ich jedem Menupunkt eine andere klasse zuweisen möchte und es sind natürlich mehr als 3 ...
Danke für die Hinweise ... allerdings wenn Du schon andeutest, dass es kompliziert ist, dann hoffe ich, dass meine technischen Kenntnisse reichen.
Schade - ich dachte es gäbe ein Standart-Workarround oder so - ist ja eine extrem verbreitete Sache dass verschieden gestaltete Menüpunkte genutzt werden.
Ralf
Wie befürchtet begreife ich es doch nicht ganz.
Das Menü an sich funktioniert, aber ich weiß nicht ob das durchzählen wirklich funktioniert bzw.
wie ich dann die CSS-Klassen benennen muss damit das Menu auch richtig angesprochen wird ...
So sieht es jetzt aus:
temp.hauptmenue >
temp.hauptmenue = HMENU
temp.hauptmenue {
special = directory
special.value = 1
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul class="menu"|</ul>
NO = 1
NO {
before.cObject= LOAD_REGISTER
before.cObject {
mainMenuNumber {
cObject=TEXT
cObject{
value={register:mainMenuNumber}+1
insertData=1
}
prioriCalc=intval
}
nr.stdWrap.dataWrap = 000000{register:mainMenuNumber}
nr.substring = -2
}
wrapItemAndSub = <li id="menu-{register:nr}">|</li>
wrapItemAndSub.insertData = 1
}
ACT < .NO
ACT.wrapItemAndSub = <li id="menu-{register:nr}" class="active">|</li>
}
}
Wieso weißt du nicht, ob das Durchzählen funktioniert? Ein Blick in den generierten Quellcode sollte genügen. Dann weißt du auch, wie du die CSS-Klassen benennen musst.
Oh Gott, wie peinlich ...
hatte gestern wohl schon ein Brett vorm Kopf ... sooooo einfach.
Wie selbstverständlich schaue ich mir normalerweise den Quellcode an.
Klar ... funktioniert das Menu.
Aber eine Verständnisfrage habe ich doch noch.
lisardo schrieb, dass es mit optionsplit nicht funktionieren würde.
aber gibt es nicht auch neben dem |*| .... die Möglichkeit mit || ?
hatte jedenfalls Beispiele mit Optionsplit gesehen, die anscheinend damit arbeiteten und mehr als 3 Zustände definierten.
Ja, das ist richtig, du kannst mit optionSplit durchzählen lassen. Genau wie du geschrieben hast, mit ||. Das Skript das du jetzt hast ist aber eventuell besser, weil beliebig viele Menüpunkte hinzukommen können.
Wenn du es mit optionSplit gelöst hättest, dann müsstest du dein TypoScript jedesmal wieder bearbeiten wenn ein Menüpunkt hinzukommt, der im optionSplit noch nicht definiert war. Wenn du allerdings schon jetzt weißt, dass es nie besonders viele Menüpunkte sein werden, dann wäre die optionSplit-Lösung sicher die Einfachere gewesen.
Es bleibt peinlich.
Obwohl ich weiss, welche Klassen angesprochen werden mache ich irgend etwas falsch:
Quelltext mit dem Zählmenü:
<div id="menu"><ul class="menu"<li id="menu-01"><a href="Startseite.10.0.html">Startseite</a></li>
aber wenn ich #menu-01 definiere passiert nichts:
#menu-01 {
display: block;
float: left;
margin-left: 10px;
color: #000000;
background-image: url(welle_menue_geruchsvernichtung.gif);
}
Das ist die eigentliche CSS für das Menü:
#menu {
margin-top: 0px;
margin-left: 0px;
width: 980px;
text-align: center;
position: absolute;
top: 140px;
background-image: url(bilder/welle1.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 175px;
}
#menu ul {
margin-top: 0px;
margin-left: 55px;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: 30px;
}
#menu ul li {
display: block;
float: left;
margin-left: 10px;
color: #000000;
background-image: url(bilder/welle_menue.gif);
}
#menu ul a {
text-decoration: none;
padding: 60px 45px 3px 12px;
display: block;
color: #000000;
}
#menu ul a:hover {
text-decoration: none;
background-color: #697e3f;
padding: 60px 45px 3px 12px;
background-image: url(bilder/welle_menue_geruchsvernichtung.gif);
}
Wie definiere ich nun #menu-01 bis #menu-07 für die verschiedenen Zustände?
ich habe versucht per css #menu-01
mitzugeben...
daber eie ID
<div id="menu"><ul class="menu"<li id="menu-01">
wird garnicht angesprochen...
die Menuepunkte behalten immer die Werte aus dem Mutterelement #menu ul und #menu ul li .. .
#angry#
Da fehlt eine schließende spitze Klammer bei <ul class="menu"
Ach Du meine Güte - was für ein banaler Fehler...
aber ich glaube garnicht mal dass das der ausschlagende war, warum ich die einzelnen ID's nicht definiert kriege.
denn wenn ich die Ausgabe anschaue, gibt er ja dennoch dieses aus:
Elternelemente
html
body
div #header
div #menu
ul .menu
li #menu-01
nur ich habe keine Ahnung, wie ich es in diesem Beispiel richt in css formuliere
also li #menu-01 bis li #menu-06 richtig anspreche
Danke für die Mithilfe.
Das Menü funktioniert klasse.
Und mein CSS-Problem gehörte ja garnicht hierher ;-)
Manchmal sieht man halt den Wald vor lauter Bäumen nicht ...
jetzt geht auch das css.