Mootools Deviant Menu in Contao benutzen

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 TL ab 2.8/ alle Contao Versionen); Mit Mootools 1.3 ist mir noch kein Fehler aufgefallen. Grundlegende Erfahrung mit Contao und Seitenstruktur gute CSS-Kentnisse um es genau anpassen zu können (Wenn nicht, kann es im Original behalten werden) keine JavaScript-Kentnisse

Dazu ist eigenltich nicht viel nötig.

Von der Seite ( http://developer.ps/moo/deviantmenu/ ) ü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 folgenden Direktlink zur Version 1.1 benutzen ( https://github.com/dirar/deviantmenu/zipball/1.1 ). 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 (Contao 2.1x) oder moo_deviantMenu.tpl(TLVersion=2.8.x|Version=ab 2.9) und in den/einen Template Ordner 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.tpl/xhtml wie es hier im Wiki im Beitrag http://de.contaowiki.org/Navigationspunkte_nicht_verlinken beschrieben ist. (Und natürlich entsprechend die CSS Klassen der nicht verklinkten Seiten anpassen)

3. Ein neues Navigationsmodul erstellen (genaueres kann hier nachgelesen werden zu dem Modul -> http://de.contaowiki.org/ModulNavigation) :

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

4. 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 von gerade, dorthin packen wo man es haben möchte
• MooTools-Templates: das eben erstellte moo_deviantMenu auswählen
• 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) sein soll müssen natürlich die Endungen hmtl5 sein!

Leider gibt es keinen Fallback, wenn Javascript nicht vorhanden ist. Also mit bedacht verwenden. Und was noch eine Unschönheit ist: 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 Eben vorher es war... Liegt aber am Script selber... bzw. hab ich noch keinen Workaround!

für fotgschrittene User können auch im moo_deviantMenu Script ein paar Einstellungen vorgenommen werden siehe: http://mootools.net/forge/p/deviantmenu

So das wars nun mal derweil mit der ersten Version von meinem Tutorial. Ich hoffe ihr kriegt ein schönes Menü hin;)

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