Akkordeon-Menü mit Wayfinder in MODx
Ein Akkordeon-Menü ist eine platzsparende Möglichkeit ein Menü effektvoll auf eine Internet-Seite zu bringen. Der Effekt funktioniert zwar nur mit dem Einsatz von Javascript, das Menü ist aber auch ohne Javascript les- und benutzbar. Ich habe es auf der Webseite des Kinderheim Pauline von Mallinckrodt eingesetzt.
Da die Javascript Effekte in MODx von script.aculo.us auf mootools umgestellt werden, ist der Eintrag im Wiki zum Erzeugen eines Akkordeon-Menüs mit dem Wayfinder veraltet. Leider sind die beiden Effektbibliotheken nicht miteinander kompatibel und deshalb sollte auf einer MODx-Seite nur eine Bibliothek (in diesem Fall mootools) eingesetzt werden.
Voraussetzungen
Für das Akkordeon-Menü muss die Menüstruktur in zwei Ebenen aufgeteilt werden. Die Struktur kann z.B. folgendermaßen aussehen (der Effekt lässt sich auf der rechten Seite ausprobieren):
- Ordner 1
- Dokument 1a
- Dokument 1b
- Dokument 1c
- Ordner 2
- Dokument 2a
- Ordner 3
- Dokument 3a
- Dokument 3a
- Ordner 1
- Dokument 1a
- Dokument 1b
- Dokument 1c
- Ordner 2
- Dokument 2a
- Ordner 3
- Dokument 3a
- Dokument 3a
Das Menü wäre auch noch weiter verschachtelbar – dies ist allerdings mit dem Akkordeon-Effekt meiner Meinung nach nicht sinnvoll.
Achtung: Durch einen Klick auf die Ordner-Ebene kann kein neuer Seiteninhalt dargestellt werden – denn dabei würde die Seite neu geladen und der Akkordeon-Effekt könnte nicht dargestellt werden.
Folgende Plugins/Snippets müssen installiert werden und funktionieren:
PHx (ohne das Plugin wäre das Ausklappen des aktiven Menüpunktes nicht realisierbar), Wayfinder und die mootools-Bibliothek mit aktiviertem Accordion-Plugin (Version 1.1.1 - diese wird mit MODx 0.9.6.3 ausgeliefert). Zu der Version 1.2 der MooTools muss im More Builder ein Script mit aktiviertem 'Accordion'-Interface geladen werden.
Chunks
Folgende Chunks werden benötigt:
<li class="toggler [+wf.classnames+]">[+wf.linktext+] [+wf.wrapper+]</li>
<li><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+] [+wf.classes+]>[+wf.linktext+]</a>[+wf.wrapper+]</li>
Leider werden Platzhalter im Javascript-Chunk von Wayfinder nicht ersetzt, deshalb muss folgender Javascript-Code im <head>-Abschnitt des Seiten-Template eingebaut werden.
<script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent('domready', function() { var accordion = new Accordion('li.toggler', 'ul.element', { opacity: false, onActive: function(toggler, element) { toggler.setStyle('css-style', 'value'); }, onBackground: function(toggler, element) { toggler.setStyle('css-style', 'value'); }, show: [*id:parent=`menuindex`:math=`?-1`*] }, $('accordion')); }); </script>
* Mit den Zeilen 'toggler.setStyle('css-style', 'value');' kann man zusätzlich zum Akkordeon-Effekt noch Änderungen am Element-Stil angeben, z.B. eine Änderung der Farbe. Diese Zeilen müssen noch entsprechend angepasst werden. Falls diese Stil-Änderung nicht benötigt wird, sollten diese Zeilen gelöscht werden.
Falls beim Darstellen des Menüs der falsche Ordner aufgeklappt wird, muss eventuell der Menüindex der Dokumente neu durchnummeriert werden – einfach das entsprechende Menü mit dem Doc Manager neu sortieren.
Eventuell muss zusätzlich auch noch die Zeile 'show: …' angepasst werden. In dieser Zeile wird dem Akkordeon der Menüindex des Eltern-Dokumentes übergeben und der zum Dokument passende Ordner ausgeklappt.
Achtung: In der Zeile 'show: …' muss zwingend eine Zahl im HTML-Quellcode ausgegeben werden, sonst funktioniert das Javascript nicht. Dies kann z.B. an einer fehlerhaften Installation von PHx liegen.
Das Snippet wird anschließend folgendermaßen aufgerufen
[!Wayfinder? &startId=`0` &level=`2` &outerTpl=`accordionOuter` &innerTpl=`accordionInner` &parentRowTpl=`accordionParentRow` &rowTpl=`accordionRow`!]
Achtung: Bei einer tieferen Verschachtelung des Menüs von mehr als zwei Ebenen müsste das Javascript z.B. mit UltimateParent modifiziert werden.
Nun muss das Akkordeon-Menü nur noch ein bisschen mit einem CSS aufgehübscht werden. Sinnvolle Klassen dafür wären z.B.:
#accordion { } #accordion .toggler { cursor: pointer } #accordion .toggler:hover { } #accordion .toggler.active { } #accordion .element li { } #accordion .element li.active { } #accordion a:link, #accordion a:visited { }
Viel Erfolg!
am 1. März. 2010, 23:37:46 Uhr
am 6. Februar. 2010, 13:38:52 Uhr
am 6. Februar. 2010, 10:39:02 Uhr
am 4. Januar. 2010, 14:33:37 Uhr
am 6. Juli. 2009, 01:39:03 Uhr
am 1. Juli. 2009, 20:00:57 Uhr
am 21. Juli. 2008, 15:52:31 Uhr
am 21. Juli. 2008, 14:12:41 Uhr
am 14. März. 2008, 11:30:22 Uhr
am 14. März. 2008, 09:36:27 Uhr
Kommentar schreiben