Tutorial: Menue-Modul mit MenuMatic

MenuMatic auf Basis von MooTools & Suckerfish 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

  1. a) mit verschachtelten Listen das Menü erstellen und
  2. b) die Mootools-Bibliothek in der richtigen Version einbinden.Media 65 Menü-Modul für Joomla 1.5.X - Screenshot Backend

 

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:

  1. [joomla-root]/templates/[mein-template]/js/mootools-1.2.1-core.js
  2. [joomla-root]/templates/[mein-template]/js/mootools-1.2-more.js
  3. [joomla-root]/templates/[mein-template]/js/mootools-compact-core.js
  4. [joomla-root]/templates/[mein-template]/js/mootools-compact-more.js
  5. [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.

Letzte Änderung amMontag, 23. September 2013

Schreibe einen Kommentar