Hallo,
es ist mal an der Zeit der Typo Community was zurückzugeben 🙂 Ich habe eine kleine Layer Navigation zusammengestrickt, die ich hier einfach mal bereitstellen möchte. Ist mehr oder weniger eine Quick & Dirty Variante, macht aber das was man erwartet 🙂
Die Navigation basiert auf der Javascript Library jquery und dem Plugin jdMenu.
Am Ende sieht die Navigation so aus:
Bild: 8works.de/…/fe_nav.gif
Abb.1
Erzeugt aus diesem Baum:
Bild: 8works.de/…/t3tree.gif
Abb.2
Zunächst habe ich mir die Version 1.3beta2 (basiert auf jQuery 1.1.2) des jdMenu heruntergeladen.
Auf dem Server habe ich in dem fileadmin Ordner einen Unterordner Namens "jquerymenu" erstellt. Also:
fileadmin/jquerymenu/
In diesen Ordner entpackt man nun die Demo des jdMenus. Anschließend sollten sich folgende Dateien in diesem Ordner befinden:
- gradient.png
- gradient-alt.png
- gradient-vertical.png
- jdMenu.css
- jdMenu.slate.css
- jdMenu-demo.html
- jquery.bgiframe.js
- jquery.dimensions.js
- jquery.jdMenu.js
- jquery.jdMenu.packed.js
- jquery-1.1.2.js
Nun habe ich mir zum Testen ein HTML Template mit dem Namen "index.html" erstellt, welches die Navigation darstellen soll. Dieses Template wird auch in dem Ordner jquerymenu gespeichert.
HTML-Template:
<!-- ###DOCUMENT_BODY### begin -->
###MENU###
<script type="text/javascript">
$(function(){
$('ul.jd_menu').jdMenu();
// Add menu hiding on document click
$(document).bind('click', function() {
$('ul.jd_menu ul:visible').jdMenuHide();
});
});
</script>
<!-- ###DOCUMENT_BODY### end -->
Wichtig hierbei ist, das der script-Block am Ende des HTML Templates eingefügt wird. Also im Prinzip vor das schliessende body-Tag.
Im Typo3 Backend erstellt man nun den Seitenbaum aus dem die Navigation erstellt werden soll (siehe Abb.2). Auf dem Root Element wird das Typo3-Template erstellt (hier die Seite mit Namen jQuery). Das eigentliche TypoScript sieht wiefolgt aus:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/jquerymenu/index.html
page.10.workOnSubpart = DOCUMENT_BODY
page.headerData.20 = TEXT
page.headerData.20.value = <link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.css" type="text/css" /><link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.jdsharp.css" type="text/css" /><script type="text/javascript" src="fileadmin/jquerymenu/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.jdMenu.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jdsharp.js"></script><link href="fileadmin/jquerymenu/jdMenu.slate.css" rel="stylesheet" type="text/css" />
page.10.marks {
MENU = HMENU
MENU {
#entryLevel = 1
special = directory
special.value = 3
stdWrap.required = 1
stdWrap.wrap =
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = <ul class="jd_menu jd_menu_slate">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
stdWrap = upper
}
CUR < .NO
CUR = 1
}
2 < .1
2.wrap = <ul>|</ul>
2.CUR < .1.NO
2.CUR = 1
3 < .1
3.wrap = <ul>|</ul>
3.CUR < .1.NO
3.CUR = 1
4 < .1
4.wrap = <ul>|</ul>
4.CUR < .1.NO
4.CUR = 1
}
}
In Zeile 15 muss noch die Seiten-ID der Startseite angepasst werden. Bei mir war es halt grad die 3. Nicht vergessen beim Typo3 Template die CSS-Styled-Content in das Template zu laden 😉
Dann nur noch speichern und ausprobieren.
Für Korrekturen und Hinweise wäre ich dankbar. Wie gesagt, es ist eine Quick & Dirty Variante.
Gruss,