Zum Inhalt springen

Menünummerierung mit CSS

Erstellt am 23. Juli 2009 · 8 Antworten · letzte Antwort am 24. Juli 2009

Tags: Frage

DasNets ·

Hi, ich habe folgendes Problem.

Ich habe ein Menü stinknormales Menü im Typo3 erstellt. Das funktiobiert alles einwandfrei. Nun möchte ich aber, dass die Hauptpunkte eine CSS-Nummerierung erhalten, damit ich ins Menü eine falrbliche Abstufung bekomme.

Mein TS sieht wie folgt aus:

  1.NO = 1
  1.NO {
   wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
   ATagTitle.field = title
  }

anstatt <li class="first">...</li><li>...</li><li>...</li><li>...</li><li class="last">...</li>, oder eben den anderen Beiden soll nun folgendes ausgegeben werden:
<li class="first menu1">...</li><li class="menu2">...</li><li class="menu3">...</li><li class="menu4">...</li><li class="last menu5">...</li>

Wie mache ich das?

Julian.​Hofmann ·

Hallo.

Wenn man weiß, wonach man suchen müsste, stößt man schnell auf Lösungen (z.B. auch im TYPO3 Kochbuch rund um Seite 447).

Zum Zählen bzw. zwischenergebnisse zu "Speichern" gibt's Register. Desweiteren hat TS Möglichkeiten, dass man Objekte ausdrücklich als mathematische Terme behandeln kann (wodurch die Verwendung von Wraps zur Erzeugung von Termen möglich wird).

Viele Grüße
Julian

DasNets ·

Eine Beispiellösung wäre mir hilfreicher gewesen!

Habe schon mit den register versucht zu arbeiten, jedoch ohne erfolg. Wenn ich das dann in meinen Wrap einbaue, dann zeigt er mit den Corde an, jedoch nicht das Ergebnis.

Könntest du mir mein Menü vielleicht dementsprechend bearbeiten?

hier mal mein TS-Code mit register

  1.NO {
   before.cObject=LOAD_REGISTER
   before.cObject {
    mainMenuNumber.cObject=TEXT
    mainMenuNumber.cObject {
     value={register:mainMenuNumber}+1
     insertData=1
    }
    mainMenuNumber.prioriCalc=intval
   }
   wrapItemAndSub = <li class="first men{register:mainMenuNumber}">|</li> |*| <li class="men{register:mainMenuNumber}">|</li> |*| <li class="last">|</li>
   ATagTitle.field = title
  }

Das funktioniert aber auch nicht - Es wird folgendes ausgegeben:
<li class="first men{register:mainMenuNumber}">...</li><li class="men{register:mainMenuNumber}">...</li><li class="men{register:mainMenuNumber}">...</li><li class="men{register:mainMenuNumber}">...</li><li class="last men{register:mainMenuNumber}">...</li>

Julian.​Hofmann ·
DasNets schrieb

Eine Beispiellösung wäre mir hilfreicher gewesen!

Würde eher sagen, "wäre Dir lieber gewesen", weil die bequemere Lösung 😉
Ich bin aber der Meinung, dass es sinnvoller ist, Lösungen zu verstehen, statt sie nur geliefert zu bekommen und per Copy&Paste zu nutzen. Daher geb ich lieber Hilfestellungen und Hinweise, die einen selbst zur Lösung führen.

DasNets schrieb

Habe schon mit den register versucht zu arbeiten, jedoch ohne erfolg.

Das ist doch eine Information, die im Forum schon gut gewesen wäre (samt dem jetzt geposteten TS). Denn der Ansatz passt ja.
wrapItemAndSub unterstützt nur leider kein insertData, weshalb Du einen anderen Weg suchen müsstest. Ein weg ist, die Nummerierung samt beginnendem LI via before vor den Menüpunkt-Link zu packen, und nur das schließende LI via wrapItemAndSub zu setzen

NO.before.cObject = COA 
NO.before.cObject {
	10 = LOAD_REGISTER
	10 {
		# L1N: Level1Number
		tempN.data = register:L1N
		tempN.wrap = |+1
		L1N.data = register:tempN
		L1N.prioriCalc = 1
	}
	20 = TEXT 
	20.data = register:L1N
	20.wrap = <li class="item-|">
}
DasNets ·

So hatte ich das auch shcon und das hat soweit auch funktioniert. Der einzige Nachteil der sich daraus ergeben hatte war, dass ich meine "first" und "last" klasse nicht automatisiert setzen konnte ... Ein Workarroun über CDD wäre zwar möglich, aber eine TS-Lösung wäre mir persönlich hilfreicher *g*

... habs jetzt erstmal mit nem CSS-Worarround gelöst ... Ne Lösung mit TScript würde mir aber trotzdem sehr am Herzen liegen.

Julian.​Hofmann ·

Hm, ok, das first/last hatte ich als Problem übersehen...

Vielleicht etwas unelegant aber trickreich und vermutlich funktionierend:
Du könntest das beginnende LI in zwei Teilen erzeugen. Den ersten Teil via wrapItemAndSub (incl. optionsplit-Krams) bis zu den first/last-Klassen. Den zweiten Teil dann über den before-Teil generieren.

NO.before.cObject = COA 
NO.before.cObject {
	10 = LOAD_REGISTER
	10 {
		# L1N: Level1Number
		tempN.data = register:L1N
		tempN.wrap = |+1
		L1N.data = register:tempN
		L1N.prioriCalc = 1
	}
	20 = TEXT 
	20.data = register:L1N
	20.noTrimWrap = | item-|">|
}
NO.wrapItemAndSub = <li class="first|</li> |*| <li class="|</li> |*| <li class="last|</li>

Nachteil ist, dass dadurch das Syntaxhighlighting (auch schon iM Forum) scheitert und vermutzlich mancher Editor meckern wird. Und Du müsstest aufpassen, dass auch in Verbindung mit ACT/CUR/... die Tags immer komplett sind.

DasNets ·

Habs jetzt nochmal umgebaut und dein TS auch weng bearbeitet, dasses genauso funzt wie's soll!

Danke auf jeden Fall nochmal.

PS: Syntaxhighlighting ist mir egal - Arbeite eh ohne *g*
PPS: Schade nur, dass IE6 nichtmal multiple CSS-Klassen unterstützt ... (also z.B. "ul li.first.aktiv")

Julian.​Hofmann ·
DasNets schrieb

PPS: Schade nur, dass IE6 nichtmal multiple CSS-Klassen unterstützt ...

Diese Diskussion ist zum Glück langsam abgeschlossen. Der IE6 ist acht (8!) Jahre alt, hat schon zwei Nachfolge und der Hersteller hat inzwischen den Support dafür eingestellt. Warum soll man so ein "Ding" noch unterstützen?
Denke, wir Entwickler sollten das einfach immer deutlicher kommunizieren. Zum einen rein von den Fakten her, zum anderen aber auch bei Angeboten (d.h. Homepage mit IE6-Kompartibilität verursacht deutlichen Mehraufwand, also auch Preisuafschlag).

DasNets ·

Das weiß ich auch - Aber wenn der Kunde nen IE6 hat, dann muss die Seite bei ihm auch laufen ...