Hallo ich versuche grad ein 3 Ebenen Menü zu bauen.
Das Obermenü soll eine GMenu sein und die 2 Untermenüs sollen Tmenüs sein.
Klappst im großen und ganzen.
Nur hab ich ein Problem, also meiner Meinung nach, mit wen Wraps im aktiven zustand.
Im Normalen Zustand werden alle Bilder des Obermenüs. Gehe ich aba ins eins der Untermenüs verschwindet das Bild des jeweiligen Obermenüs.
Einemal ein Bild wie es aussieht
http://www.bilder-hochladen.net/files/7afa-1-png-nb.html
Mein TypoScript
Typoscript-Code:
lib.navileft = HMENU
lib.navileft{
1 = GMENU
1.wrap = <ul>|</ul>
1.NO = 1
#1.NO.linkWrap = <li>|</li>
1 {
NO {
XY = 170,20
backColor=#D4C6A1
wrap= <li class="li-img">|</li>
20 = TEXT
20.text.field = title
20.text.case =upper
20.fontColor = #ffffff
20.fontFile = lte50879.ttf
20.fontSize = 14
20.align = left
20.offset = 0,18
20.niceText = 0
20.shadow {
offset=1,1
color=#98874C
}
}
}
1.ACT = 1
1.ACT.linkWrap = <li class="li-img">|</li>
1.ACTIFSUB = 1
1.ACTIFSUB.linkWrap = <li class="li-img">|
2 = TMENU
2.wrap = <ul>|</ul></li>
2.NO = 1
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="activ2">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="activ2">|
3 = TMENU
3.wrap = <ul>|</ul></li>
3.NO = 1
3.NO.linkWrap = <li>|</li>
3.ACT = 1
3.ACT.linkWrap = <li class="activ2">|</li>
}
Wenn ich mir neun den Quelltext ansehen:
<div id="col-left">
<ul>
<li class="li-img"><a href="269.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/7060cd870b.gif" width="170" height="20" border="0" alt="Star Flotte" /></a></li>
!!!!!!<a href="276.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/573a595375.gif" width="120" height="50" border="0" alt="Events" /></a>!!!!!
<ul>
<li><a href="280.0.html" onfocus="blurLink(this);">Dinnershows</a></li>
<li class="activ2"><a href="279.0.html" onfocus="blurLink(this);">Firmenveranstaltungen</a>
<ul>
<li class="activ2"><a href="290.0.html" onfocus="blurLink(this);">Betriebsfeste / Firmenveranstaltungen</a></li>
<li><a href="289.0.html" onfocus="blurLink(this);">Tagungen / Konferenzen</a></li>
<li><a href="288.0.html" onfocus="blurLink(this);">Weihnachtsfeiern</a></li>
<li><a href="287.0.html" onfocus="blurLink(this);">Silversterfeiern</a></li>
</ul>
</li>
<li><a href="278.0.html" onfocus="blurLink(this);">Private Feste</a></li>
<li><a href="277.0.html" onfocus="blurLink(this);">Planungsservice</a></li>
</ul>
</li>
<li class="li-img"><a href="300.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/6a3cdab2c5.gif" width="170" height="20" border="0" alt="Termine" /></a></li>
<li class="li-img"><a href="299.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/c05099e0bc.gif" width="170" height="20" border="0" alt="Company" /></a></li>
<li class="li-img"><a href="298.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/d295e28377.gif" width="170" height="20" border="0" alt="Kontakt" /></a></li>
<li class="li-img"><a href="297.0.html" onfocus="blurLink(this);"><img src="typo3temp/menu/ecb0ce8261.gif" width="170" height="20" border="0" alt="Presse" /></a></li>
</ul>
</div>
fällt auf das bei den ausrufezeichen das <li> fehlt.
Nun bin ich der meinung das es einen Fehler on den wraps gibt.
Würde mich freuen wenn sich wer meinen TS anschaut und mir einen Tip oda Fehler meldet.
danke
mfg Valefor
Im NO hast das linkWrap aukommentiert. Dafür findet sich ein wrap, der ja auf die Zustände der ersten Ebene nicht kopiert wird. Stattdessen gibt es dann dort einen linkWrap.
Verwende statt linkWrap besser wrapItemAndSub, dann kannst du dir so wraps wie <ul></ul><li> und das schließende Pendant sparen.
Versuchs mal so:
lib {
navileft = HMENU
navileft {
1 = GMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
XY = 170,20
backColor=#D4C6A1
wrapItenAndSub = <li class="li-img">|</li>
20 = TEXT
20 {
text.field = title
text.case = upper
fontColor = #ffffff
fontFile = lte50879.ttf
fontSize = 14
align = left
offset = 0,18
niceText = 0
shadow {
offset=1,1
color=#98874C
}
}
}
ACT < .NO
ACTIFSUB < .ACT
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="activ2">|</li>
}
ACTIFSUB < .ACT
}
3 < .2
}
}
Danke dir, jetzt ist der Code auch vile leichter zu versthen 😉
Die Grafiken werden nun auch angezeigt, aber dadurch ist ein anderer Fehler aufgetreten. Um das Obermenü werden keine <li>-Tags gesetzt.
<div id="col-left">
<ul>
<a href="269.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/472ece373b.gif" width="170" height="20" border="0" alt="Star Flotte" /></a><a href="276.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/887534aab9.gif" width="170" height="20" border="0" alt="Events" /></a>
<ul>
<li class="activ2"><a href="280.0.html" onFocus="blurLink(this);">Dinnershows</a>
<ul>
<li><a href="313.0.html" onFocus="blurLink(this);">Palais de Paris</a></li>
<li><a href="286.0.html" onFocus="blurLink(this);">Dinnerspektakel</a></li>
<li><a href="285.0.html" onFocus="blurLink(this);">Dinnerparty Kieler Woche</a></li>
<li><a href="284.0.html" onFocus="blurLink(this);">Silvester</a></li>
<li><a href="283.0.html" onFocus="blurLink(this);">Casinoabend</a></li>
<li><a href="282.0.html" onFocus="blurLink(this);">Hamburger Cruise Days</a></li>
</ul>
</li>
<li><a href="279.0.html" onFocus="blurLink(this);">Firmenveranstaltungen</a></li>
<li><a href="278.0.html" onFocus="blurLink(this);">Private Feste</a></li>
<li><a href="277.0.html" onFocus="blurLink(this);">Planungsservice</a></li>
</ul>
<a href="300.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/8f91a2a936.gif" width="170" height="20" border="0" alt="Termine" /></a><a href="299.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/e515d20903.gif" width="170" height="20" border="0" alt="Company" /></a><a href="298.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/4a4d64a899.gif" width="170" height="20" border="0" alt="Kontakt" /></a><a href="297.0.html" onFocus="blurLink(this);"><img src="typo3temp/menu/1ad0439160.gif" width="170" height="20" border="0" alt="Presse" /></a>
</ul>
</div>
Gleich beim ersten Link.
Die Struktur soll halt so aussehen.
<ul>
<li>1 ebene
<ul>
<li>2 ebene
<ul>
<li>3 ebene</li>
<li>3 ebene</li>
<li>3 ebene</li>
</ul>
</li>
</ul>
</li>
<li>1 ebene</li>
<li>1 ebene</li>
<li>1 ebene</li>
<li>1 ebene</li>
</ul>
Momentan sieht es halt so aus
<ul>
1 ebene
<ul>
<li>2 ebene
<ul>
<li>3 ebene</li>
<li>3 ebene</li>
<li>3 ebene</li>
</ul>
</li>
</ul>
1 ebene
1 ebene
1 ebene
1 ebene
</ul>
Bin dir echt dankebar für die Hilfe, sind meine ersten kontakte mit TS ^^
Danke
Ja sorry, da hab ich nen RR-fehler in Zeile 11... es muss wrapItemAndSub heißen
Ja cool, es funktioniert, die bilder werden richtig angezeigt und auch die untermenüs sind richtig. sogar die html strict ist richtig. das freut mich 🙂
nun noch paar css einstellungen und es is perfekt.
danke dir vielmals.
Bitte gerne...
Stell das Thema bitte auf gelöst
hmmm tut mir leid. klappt doch nicht.
das gmenu beachtet das wrapItemandSub nicht.
er haut da keine <li></li> rum.
wenn ich aber nur ein wrap nehme dann stehen da die <li></li> da, was dann aber auch durchgehend ist.
ich hoff du verstehst was ich meine.
er macht um die aktiven ebenen ein <li></li> obwohl das nicht geschlossen werden soll, wenn die ebene in der man sich befindet aktiv ist.
da ich wie gesagt erst mit TS anfange steig ich da noch nicht ganz durch.
habs nochma so versucht.
lib {
navileft = HMENU
navileft {
1 = GMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
XY = 170,20
backColor=#D4C6A1
wrapItemAndSub = <li class="li-img">|</li>
20 = TEXT
20 {
text.field = title
text.case = upper
fontColor = #ffffff
fontFile = lte50879.ttf
fontSize = 14
align = left
offset = 0,18
niceText = 0
shadow {
offset=1,1
color=#98874C
}
}
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="li-img">|</li>
}
ACTIFSUB < .ACT
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT < .NO
ACT {
wrapItemAndSub = <li class="activ2">|</li>
}
ACTIFSUB < .ACT
}
3 < .2
}
}
dann klappte es leider garnicht.
kannst dir das vielleicht nochma ansehen?
wäre echt dankbar
MFG
Du kannst ein Listmenü nicht mit wrap bauen, wenn es mehrere Ebenen hat, da sonst jedes li geschlossen wird. Das li am Ende einer Ebene muss aber immer offen bleiben, außer dann wenn keine weitere Ebene folgt. Daher geht das mit wrap nicht korrekt.
Ich kann aber keinen Fehler in dem Code finden.
Um welce Ebene geht es denn? Und um welchen Zustand? ACT oder ACTIFSUB?
Hmm also es handelt sich um jede aktive ebene.
wenn alle menüs geschlossen sind soll auch jedes li geschlossen sein.
Übersicht:
Home
-Über Uns
Kontakt
-Anfahrt
-Öffnungszeiten
Wenn ich nun in Über Uns bin, soll das li-tag von Home nicht geschlossen werden. sondern es soll sich stattdessen ein neues ul öffnen mit dem li (über uns). Und erst hinter dem /ul soll sich das li von Home schließen.
Also müsste das doch der ACT zustand sein oder nicht?
Im moment macht er aber garkeine li um die ebene Home, Kontakt nur um die darunter liegenden.
mfg
P.S.
Wenn ich anstatt wrapItemandSub nur wrap mache, erscheinen li tags, die aber auch geschlossen werden - was ja beim aktiven zustand ned sein soll.
P.S. 2
bei den untermenüs klappt das mit den li-tags ja richtig.
<li class="activ2"><a href="271.0.html" onfocus="blurLink(this);">River Star</a>
<ul>
<li><a href="318.0.html" onfocus="blurLink(this);">Eindrücke</a></li>
<li><a href="319.0.html" onfocus="blurLink(this);">Panorama 360°</a></li>
</ul>
</li>
OK...
Bist du denn ganz sicher das es der Zustand ACT ist und nicht ACTIFSUB?
Das die li's am Ende offen bleiben das regelt ja das WrapItemAndSub. Hast du auch sicher überall wrapItemAndSub stehen... weil du schreibst immer WrapItemandSub.
Schreib doch mal testweise in den ACTIFSUB zustand auch das wrapItemAndSub mit rein...
Also:
...
ACTIFSUB < .ACT
ACTIFSUB {
wrapItemAndSub = <li class="li-img">|</li>
}
...
Oder versuch mal ACTIFSUB nicht vom ACT sondern vom NO zu kopieren, also dann:
...
ACTIFSUB < .NO
ACTIFSUB {
wrapItemAndSub = <li class="li-img">|</li>
}
...
Ich hab beides ausprobiert. Passiert leider nix 🙁
Und ja ich hab überall wrapItemAndSub stehen - warn tipfehler.
Also ich bin der Meinung das er das aller erste wrapItemAndSub, welches um das GMenu herum ist, nicht beachtet.
Das wird ja nichtma im HTML code angezeigt.
wenn ich jedoch im HMenu wrap ein <ul><li>|</li></ul> mache dann taucht ein <li> vor meinem menü auf und ein </li> hinter dem menü.
Hat es vielleicht etwas mit CUR zu tun? damit ts weiß das das momentane menü gemeint ist?
OK... Ist klar das dann ein li erscheint, aber es bleibt dennoch falsch.
Ich weiß nicht woher du jetzt CUR hast... In deinem von dir geposteten Code sehe ich kein CUR... Von daher kann ich ganz klar sagen: Jaein.
Hmm stimmt scho das ich das ned benutzte, dachte halt nur daran das er einen wrap mach soll, wenn die Ebene im moment geöffnet ist.
Bin momentan echt ratlos, ich probier rum, mach da ma nen wrap anders, hier nen li mehr aba nix.
kannst du dir vielleicht erklären wieso das mit den lis bei den unterebnen klappt aber in der obersten nicht?
Ok ich seh schon das bringt nich mehr viel...
Wenn du möchtest und du genug Vertrauen hast würde ich es mir vor Ort anschauen.
Wenn du das möchtest schick mir ne PN mit den Zugangsdaten
Ok, habs mir angesehen und habe versagt *heul...
Ne also zur allgemeinen Diskussion:
wrapItemAndSub funktioniert nicht in GMENU's bis TYPO3 4.2.0
Deswegen habe ich es so gelöst:
lib {
navileft = HMENU
navileft {
1 = GMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrap = <li class="li-img">|</li>
XY = 170,20
backColor=#D4C6A1
20 = TEXT
20 {
text.field = title
text.case = upper
fontColor = #ffffff
fontFile = lte50879.ttf
fontSize = 14
align = left
offset = 0,18
niceText = 0
shadow {
offset=1,1
color=#98874C
}
}
}
ACT < .NO
ACT {
wrap = <li>|
}
}
2 = TMENU
2 {
expAll = 1
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT < .NO
ACT {
wrapItemAndSub = <li>|</li>
ATagParams = class="activ2"
}
}
3 < .2
3 {
ACT {
ATagParams = class="activ3"
}
}
}
}
Das generiert ein korrektes Menü, mit einem kleinen Fehler:
<ul>
<li>Text
<ul>
<li>Text1
<ul>
<li>Text2</li>
</ul>
</li>
</ul>
<li>Text3</li>
<li>Text4</li>
<li>Text5</li>
<li>Text6</li>
Wie man hier sieht fehlt in Zeile 10 ein schließendes li.
Verantwortlich ist der ACT-Zustand.
Ich komm nicht drauf wie man dorthin das schließende li bekommt.
Also wenn jemand drauf kommt, würds mich auch interessieren ;-)
Oh man wie blöd von mir... Ich hatte die dritte Menüebene total vergessen...
Also so geht es..:
lib {
navileft = HMENU
navileft {
1 = GMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrap = <li class="li-img">|</li>
XY = 170,20
backColor=#D4C6A1
20 = TEXT
20 {
text.field = title
text.case = upper
fontColor = #ffffff
fontFile = lte50879.ttf
fontSize = 14
align = left
offset = 0,18
niceText = 0
shadow {
offset=1,1
color=#98874C
}
}
}
ACT < .NO
ACT {
wrap = <li>|
}
}
2 = TMENU
2 {
expAll = 1
wrap = <ul>|</ul></li>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT < .NO
ACT {
wrapItemAndSub = <li>|</li>
ATagParams = class="activ2"
}
}
3 < .2
3 {
wrap = <ul>|</ul>
ACT {
ATagParams = class="activ3"
}
}
}
}