21. 03. 2004, 20:05

Hi!

Da ich begeisterter Typo3 Nutzer bin, möchte ich hier mal was zurückgeben.

Ich habe auf der Listutorial Seite ein aufklappbares Menü gefunden welches ich gerne benutzen wollte:

[url]http://css.maxdesign.com.au/listutorial/[/url]
[url]http://www.magnin-sante.ch/journal/html/menu3/menuhorizontal.htm[/url]

vielen Dank an Bieler Batiste für das Menü.

Was jetzt fehlt war, die Möglichkeit das ganze automatisch zu generieren.

Also zuerst die css und die Javascripte eingebunden:

[code:1:515f4ec297]
page = PAGE
...
...

page.stylesheet = fileadmin/typo3help2/menu.css
page.headerData.10 = TEXT
# folgendes alles auf einer Zeile !!!
page.headerData.10.value=<script type="text/javascript" src="fileadmin/typo3help2/javascript.js"></script><script type="text/javascript" src="fileadmin/typo3help2/browserdetect.js"></script>
[/code:1:515f4ec297]

Die CSS und die Scripte sind unter obigem zweiten Link zu finden.

Nun zum erstellen des Menü

[code:1:515f4ec297]
page.20 = TEMPLATE
page.20 {

.....
....
subparts.navi = HMENU
subparts.navi {

# Erste Menüebene (horizontaler Teil)
# die DIVs sind eingefügt worden um besser seperat daraufzugreifen zu können
1 = TMENU
1 {
wrap = <ul id="menu">|</ul>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li><div id="top">|</div><ul>
NO.linkWrap = <li><div id="top">|</div></li>
}

# Zweite Ebene (erster vertikaler Teil)
# ----> Alle folgenden sind identisch mit dieser
2 = TMENU
2 {
wrap = | </ul></li>
expAll = 1
IFSUB = 1
IFSUB.allWrap = <li>|<ul>
NO {
linkWrap = <li>|</li>
RO = 1
}
}
[/code:1:515f4ec297]

Möchte man die Tiefe beschränken also meinetwegen nur bis zur zweiten Hierarchie generieren muss man darauf achten das man folgendes weglässt.

[code:1:515f4ec297]
IFSUB = 1
IFSUB.allWrap = <li>|<ul>
[/code:1:515f4ec297]

Die Ursache dafür ist, da damit der [code:1:515f4ec297] <li> Link <ul> [/code:1:515f4ec297] geöffnet wird, welcher erst im wrap der nächsten Ebene geschlossen wird.

will man weitere Menüebenen definieren, kann man die zweite Hierarchie einfach duplizieren

Hier mal für die 3., 4. , 5. Hierarchie
[code:1:515f4ec297]
3 < .2
4 < .2
5 < .2
[/code:1:515f4ec297]

Was ich nicht verschweigen möchte ist, dass es unter Umständen dazukommen kann, dass die unformatierte Liste kurzzeitig zu sehen ist. Ich habe es so gelöst , dass über die css der komplette div in dem das Menü sitzt versteckt wird und über das Javascript am Ende sichtbar gemacht wird. Der Author des Menüs sagt dass diesem Effekt auch vorgebeugt werden kann wenn man im HTML ein Javascript einbaut welches das beiliegende JavaScript dann schneller startet.

Ich hoffe obiges hilft hier dem einen oder anderen weiter. Dieses Menü benutzt kein tmenulayers.php , sondern generiert eine Liste wie auf der Listutorialseite erklärt. Das heisst das mit kleineren Anpassungen auch mit anderen Menüs von dort funktionieren sollte. Feedback ist natürlich willkommen :)

Gruß

Steffen