Tutorial: Menue-Modul mit MenuMatic
- geschrieben von Gerald Martin
- Freigegeben in CSS, HTML & Co.
- Gelesen 7428 mal
- Schriftgröße Schriftgröße verkleinern Schrift vergrößern
- Schreiben Sie den ersten Kommentar!
Nachdem ich auf der Suche nach einer Lösung für den Einsatz von Joomla! 1.5.X & MenuMatic letztendlich beides zur Zusammenarbeit bewegen konnte, möchte ich anhand eines kleinen Tutorials davon berichten.
Aber fangen wir von vorn an:
Die schicke Menü DropDown-Animation von MenuMatic stach mir schnell ins Auge und so suchte ich nach Möglichkeiten, die Mootools-Klasse für Joomla! 1.5.X tauglich zu bekommen.
MenuMatic von greengeckodesign (Jason J. Jaeger) ist eine auf SuckerFish und Mootools basierende JavaScript-Applikation. Das heißt, man muss
- a) mit verschachtelten Listen das Menü erstellen und
- b) die Mootools-Bibliothek in der richtigen Version einbinden.
a) realisiert man am besten mit dem Media 65 Joomla Menu Module (Registrierung für Download notwendig). Im Gegensatz zum "herkömmlichen" mod_mainmenu hat man noch weitere Möglichkeiten, IDs und Klassen für CSS zu definieren (siehe Screenshot):
<ul class="menu" id="ptm-nav"> <li class="current"><a href="#"><span>Startseite</span></a> <ul> <li><a href="#"><span>Joomla!-Lizenz</span></a></li> <li><a href="#"><span>Mehr über Joomla!</span></a> <ul> <li><a href="#"><span>FAQ</span></a></li> </ul> </li> </ul> </li> <li>[...]</li> </ul>
So sollte die Struktur aussehen, wenn die "klassische" Suckerfish-Syntax (Suckerfish- Dropdowns by D. Griffiths and D. Webb )angewendet wird.
b) ist etwas tricky, da Joomla! - derzeit in Version 1.5.10 - Mootools in der Version 1.11 verwendet und MenuMatic die Version 1.2 verlangt.
Nun sollte man nicht einfach die vorhandene Bibliothek [joomla-root]/media/system/js/mootools.js ersetzen, sondern dern Core möglichst in Ruhe lassen, damit 1. die Funktion und 2. die Updatefähigkeit des Systems erhalten bleibt. Abgesehen davon wird an verschiedenen Stellen berichtet, dass ein Adhoc-Upgrade auf Mootools 1.2 Probleme mit dem Backend-Menü verursacht.
Aus diesen Gründen lassen wir die originale Mootools-Bibliothek von Joomla! in Ruhe und beschränken uns ausschließlich auf die Integration in das Template. Auf der Grundlage dieser Anleitung gehen wir die Sache an:
- Mootools-Dateien in das Template-Verzeichnis hochladen. (Quelle support.pillwax.com/open-source/doku.php?id=joomla:general:mootools - "3. When using Mootools 1.2")
- Wir brauchen dazu nicht nur die Mootols-Core-Dateien, sondern auch die Kompatibilitätsklassen:
- [joomla-root]/templates/[mein-template]/js/mootools-1.2.1-core.js
- [joomla-root]/templates/[mein-template]/js/mootools-1.2-more.js
- [joomla-root]/templates/[mein-template]/js/mootools-compact-core.js
- [joomla-root]/templates/[mein-template]/js/mootools-compact-more.js
- [joomla-root]/templates/[mein-template]/js/mootools-compact-custom.js
- Da aber mit dem Befehl <jdoc:include type="head" /> im Template (index.php) u.a. die Joomla-eigene Mootools-Bibliothek eingebunden wird, muss dieser Aufruf unschädlich gemacht werden. Dazu benötigen wir einige PHP-Aufrufe:
zuerst "head" ganz nurmal einbinden:
<jdoc:include type="head" />
danach die Einbindung von mootools.js verhindern:
<?php /* --- This removes any default Scripts from the Header Buffer --- */ $header = $this->getHeadData(); // Get the current HEAD buffer $header['scripts'] = array(); // Clear all current 'scripts' entries $this->setHeadData($header); // Update the HEAD buffer /* --- We add the MooTools Framework manually, see below --- */ ?>
zuletzt die eigenen Klassen für Mootools 1.2.1 "manuell" einbinden:
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-1.2.1-core.js"></script> <script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-1.2-more.js"></script> <script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-core.js"></script> <script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-more.js"></script> <script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-custom.js"></script>
Damit haben wir die Grundlagen für MenuMatic abgeschlossen.
Zuguterletzt muss MenuMatic selbst eingebunden anhand einer Instanz der Klasse zum Arbeiten bewegt werden:
<!-- Load the MenuMatic Class --> <script language="JavaScript" type="text/javascript" src="/↵ <?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>↵ /js/MenuMatic_0.68.2.js"></script> <!-- Create a MenuMatic Instance --> <script type="text/javascript" > window.addEvent('domready', function() { var myMenu = new MenuMatic(); }); </script> </body> </html>
Im Beispiel wird mit Absicht die Version MenuMatic_0.68.2.js verwendet.
Mit der aktuellen Version MenuMatic_0.68.3.js ließ sich das Script leider nicht zur Mitarbeit überreden.
Ich hoffe, die Anleitung hilft dem ein- oder anderen weiter. Über Resonanz freue ich mich.