Quelltext der Seite Mootools Deviant Menu

{{AppliesTo|TLVersion=2.8.x|Version=ab 2.9}}
[[Category: Admin_HOWTOS]]

=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/ 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 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:

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

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

<source lang="html4strict">
//--><!]]>
  </script>
</source>

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 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 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:

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

(Damit initialisiert man das Menü)
{{msgWarning|Wenn das Menü in einer HTML5 Seite (ab Contao 2.10) sein soll müssen natürlich die Endungen hmtl5 sein!}}
{{msgImportant|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 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 http://www.contao-community.de/showthread.php?22402-Mootools-deviantmenu-in-TYPOlight-benutzen]