Anmerkung des Autors

Da mein erstes eingebautes Contao Menü durch das Tutorial von MacKP ermöglicht wurde, hab ich mir gedacht ich spendier auch eins. Da dies aber mein erstes Tutorial ist, bitte ich um Verständins;) ...Ich habs auch vom Aufbau ziemlich an das von MacKP angelehnt... *grins*

Voraussetzung

Mootools 1.2 (also TypoLight ab 2.8 / alle Contao Versionen); mit Mootools 1.3 ist noch kein Fehler bekannt.
Grundlegende Erfahrung mit Contao und Seitenstruktur.
Gute CSS-Kentnisse, um das Menü genau anpassen zu können (wenn nicht, kann es im Original behalten werden).
Keine JavaScript-Kentnisse

Script herunterladen

Von der Hersteller-Seite über den Link "Download script" das Skript herunterladen. Darüber befindet sich eine DEMO des Menüs.

Wer sich jedoch von der sich darauf öffnenden github.com Seite erschlagen fühlt, kann auch den Direktlink zur Version 1.1 benutzen.
Es wird auch ein Beispiel, allerdings ohne mootools-core in der zip-Datei mitgeliefert.

Vorgehen

1. Die Datei "deviantMenu.css" importieren.

2. Die JS-Datei umbenennen in z.B. moo_deviantMenu.xhtml (ab Contao 2.10) oder moo_deviantMenu.tpl (TLVersion=2.8.x|Version=ab 2.9) und in den Template Ordner (TL_ROOT/templates) hochladen. Anschließend geht man in den Template Editor in Contao und bearbeitet das Script folgendermaßen:

Beginnen muss das Script mit:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

dann folgt der normale Code (die ehemalige deviantMenu.js). Und enden muss es auf:

//--><!]]>
  </script>

Um das Menü automatisch an den Unterpunkt springen zu lassen indem man sich gerade befindet, muss die CSS Klasse .selected durch .active ersetzt werden (Zeilen: 55, 56, 64)

3. Es kann das Standard Navigationstemplate (nav_default.xhtml/tpl) verwendet werden. Wenn jedoch (wie es bei mir der Fall ist) ein Navigationspunkt, der Unterpunkte hat, nicht verlinkt werden soll, so sollte man sich ein Navigationstemplate bauen z.B.: nav_partiallinked.xhtml/tpl wie es unter "Navigationspunkte nicht verlinken" beschrieben ist (und natürlich entsprechend die CSS-Klassen der nicht verlinkten Seiten anpassen).

4. Ein neues Navigationsmodul erstellen:

• Startlevel 0
• Stoplevel 0
• Referenzseite (keine bzw. Startpunkt oder was man möchte)
• Navigationstemplate: das Standard-Template nav_default.xhtml/tpl oder das vorhin erstellte nav_partiallinked.xhtml/tpl
• Experten-Einstellungen: deviantMenu-main-conatiner als CSS-ID!!! einfügen.

5. Im Seitenlayout:

• CSS-Datei auswählen: deviantMenu.css (nach eigenen Vorstellungen anpassen; vor allem die Bilddateien, die auch noch hochgeladen werden müssen, falls verwendet ;) !)
• Navigationsmodul aus Punkt 4 einbinden
• MooTools-Templates moo_deviantMenu aus Punkt 2 aktivieren
• Eigener JavaScript-Code:

<!-- Create a Deviant Menu Instance -->
<script type="text/javascript" >
  window.addEvent('domready', function(){
      var devmenu = new deviantMenu('deviantMenu-main-conatiner');
  });
</script>

Damit initialisiert man das Menü.

Wenn das Menü in einer HTML5 Seite (ab Contao 2.10) eingebunden wird, müssen die Templates die Endungen *.hmtl5 haben!

Leider gibt es keinen Fallback, wenn Javascript nicht vorhanden ist. Dies sollte vor der Einbindung bedacht werden, bevor dieses Menü verwendet wird. Und noch eine Unschönheit: Wenn die aktiven Links in den Ebenen weit verschachtelt sind, ist das Menü nicht so hoch wie es sein müsste, sondern so hoch wie die Ebene vorher es war. Dies liegt am Script selbst. Es gibt bis dato auch noch keinen Workaround dafür!

Fortgeschrittene User können auch im moo_deviantMenu-Script ein paar Einstellungen vornehmen. Siehe: http://mootools.net/forge/p/deviantmenu

Link zum Forum: http://www.contao-community.de/showthread.php?22402-Mootools-deviantmenu-in-TYPOlight-benutzen