Beginnen wir also mit dem Menü. Alle Menüs haben ein "Menü-Ober-Element", HMENU. Das heisst übersetzt nichts anderes als "hierarchisches Menü".
Hier mal ein einfacher Code für das Menü:
Code:
TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 3
1 = TMENU
1.wrap=<ul>|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="topnavi-aktiv">|</li>
}
Wollen wir uns das mal anschauen.
Also wir definieren unseren Marker als HMENU.
Diesem sagen wir mit special = directory , das es sich um ein menü handelt, das sich nach dem Seitenbaum richtet.
Mit special.value = 3 sagen wir dem Menü, das es als Ausgangspunkt die Seite mit der id 3 hat, in meinem Fall ist das die Seite "oberes Menü"
Tipp: wenn ihr im Seitenbaum mit der Maus über das Icon einer Seite fahrt, bekommt ihr die Seitenid eingeblendet.
Nun fangen wir mit der ersten Ebene des Menüs an (hier brauchen wir auch nur eine Ebene, wir wollen oben keine Unterseiten anzeigen)
Also nehmen wir wieder für das Unterobjekt eine Zahl, diesmal die 1
1 = TMENU
Damit legen wir fest, das es sich um ein Textmenü handelt.
Als nächstes packen wir das Menü ein. Wir nehmen standardmässig für ein CSS-Layout eine Liste der Form
Code:
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
<li><a href="#">Menüpunkt 3</a></li>
</ul>
Wir legen also um das ganze Menü die ul's: 1.wrap=<ul>|</ul>
Jetzt geht es zu den einzelnen Menü-Einträgen, also die Seitenlinks.
1.NO = 1
Was ist denn das ?
ich möchte lösen:
ok, unser TMENU hat ein Unterobjekt, den normalen Menüeintrag (NO)
mit 1.NO = 1 sagen wir nichts anders als
[Zustand normaler Menüeintrag] = aktiviert (1)
Dies ist zwar nicht unbedingt nötig, wir gewöhnen uns das aber besser direkt so an, damit wir später nicht stolpern.
Wir packen noch um unseren Eintrag den li-tag mit der Anweisung
1.NO.linkWrap = <li>|</li>
Jetzt wollen wir noch den ausgewählten Eintrag hervorheben. Dafür gibt es das Objekt ACT (actual)
Wir aktivieren den Zustand mit
1.ACT = 1
Dann machen wir es uns ganz einfach und kopieren alles vom NO-Objekt mit
1.ACT < .NO
Der aktuelle Eintrag soll nicht verlinkt sein
1.ACT.doNotLinkIt = 1
Das einzige, was anders sein soll ist die css-Klasse, und die ändern wir für den ACT-Eintrag mit
1.ACT.allWrap = <li id="topnavi-aktiv">|</li>
Fertig.
Zum besseren Verständnis hier alle Zustände, die es für Menüeinträge gibt:
NO - der Normalzustand
RO - der RollOver (hover)-Zustand (den benötigen wir hauptsächlich für das grafische Menü, sonst machen wir das mit CSS)
CUR - Der Menüeintrag der momentan geöffneten Seite
ACT - wie CUR, nur bleibt er auch bei geöffneten Unterseiten des Eintrags
IFSUB - ein Zustand für Seiten, die Unterseiten besitzen
SPC - Abstand (space) - gilt für Seiten vom Typ "Abstand"
USR - für Seiten mit Zugangsbeschränkung
Jeder Zustand, der benutzt wird, muss immer aktiviert werden.
Prima, dann machen wir das doch auch direkt für das linke Menü. Einziger Unterschied, das wir von einer anderen Ursprungsseite ausgehen und ev. mehrere Ebenen brauchen.
Als erstes kopieren wir unser Menü und ändern nur den Startpunkt und den Namen der CSS-Klasse
Code:
LINKS = HMENU
LINKS {
special = directory
special.value = 3
1 = TMENU
1.wrap=<ul>|</ul>
1.NO = 1
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="leftnavi-aktiv">|</li>
}
Um die nächste Ebene testen zu können, legen wir 2 weitere Seiten unterhalb von Produkte an:
Machen wir uns an die Darstellung. Hier wird es jetzt schön einfach, da wir wieder kopieren können.
Wir erweitern unser HMENU um ein weiteres Objekt. Dieses ist automatisch das Objekt der nächsten Ebene - ist das nicht super praktisch ?
Und dieses Objekt kopieren wir einfach von der ersten Ebene Wir müssen natürlich noch die CSS-Klasse abändern
Code:
2 = TMENU
2.noBlur = 1
2.wrap = <li><ul>|</ul></li>
2.noBlur = 1
2.NO = 1
2.NO.ATagTitle.field = title
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT < .2.NO
2.ACT.doNotLinkIt = 1
2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li>
Komisch, wir probieren es und sehen, das sich nichts verändert hat. Haben wir was falsch gemacht ?
Zur Sicherheit löschen wir das Cache, indem wir auf die beiden Buttons links klicken:
hmm - immer noch nichts. Scheinbar fehlt noch was.
Ah, wir brauchen für die Fortführung der Ebenen einen Wert, der sagt, bei welcher Ebene es los geht.
Schauen wir uns die Ebenen nochmal an:
Unser Menü hat den Ausgangspunkt Ebene 1, wir fügen das noch ein:
entryLevel = 1
und siehe da, es funktioniert
Manche mag es ärgern, das Typo3 immer noch einen Code in die Links schreibt:
Code:
onfocus="blurLink(this);"
um das abzuschalten, gibt man noch den Parameter
noBlur = 1
mit. Ausserdem möchten wir noch den title-tag der Links füllen, das machen wir mit dem Seitentitel:
wir schauen uns nochmal das komplette linke Menü an:
Code:
LINKS = HMENU
LINKS {
special = directory
special.value = 2
entryLevel = 1
1 = TMENU
1.wrap= <ul>|</ul>
1.noBlur = 1
1.NO = 1
1.NO.ATagTitle.field = title
1.NO.linkWrap = <li>|</li>
1.ACT = 1
1.ACT < .NO
1.ACT.doNotLinkIt = 1
1.ACT.allWrap = <li id="leftnavi-aktiv">|</li>
2 = TMENU
2.noBlur = 1
2.wrap = <li><ul>|</ul></li>
2.noBlur = 1
2.NO = 1
2.NO.ATagTitle.field = title
2.NO.linkWrap = <li>|</li>
2.ACT = 1
2.ACT < .2.NO
2.ACT.doNotLinkIt = 1
2.ACT.allWrap = <li id="leftnavi-sub-aktiv">|</li>
}
Jetzt können wir endlich loslegen. Uns fehlt noch ein schönes CSS für die Menüs, und da zähl ich auf euch, das einer mal einen passenden CSS-Code für die beiden ul's postet. Wir können jetzt die Seiten mit beliebigen Inhalten füllen und mit dem Menü durch die Seiten navigieren - wunderbar.
![[Workshop] Typo3-Workshop Teil IV - Template, Fortsetzung](http://www.traum-projekt.com/forum/iconimages/workshops-und-tutorials/workshop-typo3-workshop-teil-iv.gif){kind=small}
Bin eigentlich auch nur ein Gasthörer.
