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

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.