Mootools Deviant Menu - Versionsgeschichte

Manitougs: Aufbereitung

2011-08-27T20:56:20Z

Aufbereitung

T3g: /* Vorgehen: */

2011-08-23T14:55:51Z

‎Vorgehen:

Xtra: interne Verlinkung

2011-08-22T23:45:56Z

interne Verlinkung

T3g am 22. August 2011 um 15:15 Uhr

2011-08-22T15:15:53Z

T3g am 22. August 2011 um 15:15 Uhr

2011-08-22T15:15:30Z

T3g: /* Mootools Deviant Menu in Contao benutzen */

2011-08-22T15:12:04Z

‎Mootools Deviant Menu in Contao benutzen

T3g: Die Seite wurde neu angelegt: „{{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…“

2011-08-22T15:06:56Z

Die Seite wurde neu angelegt: „{{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…“

Neue Seite

{{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 erste Tutorial ist bitte ich um Verständins;)
...Ich habs auch vom Aufbau ziemlich an das von MacKP angelehnt...

==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[//><!]]>
</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">

<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!}}

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;)

@@ Zeile 2: / Zeile 2: @@
 [[Category: Admin_HOWTOS]]
-=Mootools Deviant Menu in Contao benutzen=
+=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:==
+=Voraussetzung=
-Mootools 1.2 (also TL ab 2.8/ alle Contao Versionen); Mit Mootools 1.3 ist mir noch kein Fehler aufgefallen.
+Mootools 1.2 (also TypoLight ab 2.8 / alle Contao Versionen); mit Mootools 1.3 ist noch kein Fehler bekannt.<br />
-Grundlegende Erfahrung mit Contao und Seitenstruktur
+Grundlegende Erfahrung mit Contao und Seitenstruktur.<br />
-gute CSS-Kentnisse um es genau anpassen zu können (Wenn nicht, kann es im Original behalten werden)
+Gute CSS-Kentnisse, um das Menü genau anpassen zu können (wenn nicht, kann es im Original behalten werden).<br />
-keine JavaScript-Kentnisse
+Keine JavaScript-Kentnisse
-==Dazu ist eigenltich nicht viel nötig.==
+=Script herunterladen=
-Von der Seite ( [http://developer.ps/moo/deviantmenu/ http://developer.ps/moo/deviantmenu/] ) über den Link "⇓ Download script" das Skript herunterladen.
+Von der [http://developer.ps/moo/deviantmenu/ 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 folgenden Direktlink zur Version 1.1 benutzen ( [https://github.com/dirar/deviantmenu/zipball/1.1 https://github.com/dirar/deviantmenu/zipball/1.1] ).
+Wer sich jedoch von der sich darauf öffnenden github.com Seite erschlagen fühlt, kann auch den [https://github.com/dirar/deviantmenu/zipball/1.1 Direktlink] zur Version 1.1 benutzen.<br />
 Es wird auch ein Beispiel, allerdings ohne mootools-core in der zip-Datei mitgeliefert.
-==Vorgehen:==
+=Vorgehen=
-'''1.''' Die Datei "deviantMenu.css" importieren.
+'''1.''' Die Datei "deviantMenu.css" [[CSS#Selbsterstellte_Stylesheets_in_das_Framework_importieren|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:
+'''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 [[Templates_bearbeiten#Direkt_in_Contao_.C3.BCber_das_Backend|bearbeitet]] das Script folgendermaßen:
 Beginnen muss das Script mit:
-<source lang="html4strict">
+<source lang="javascript">
 <script type="text/javascript">
 <!--//--><![CDATA[//><!--
@@ Zeile 34: / Zeile 34: @@
 dann folgt der normale Code (die ehemalige deviantMenu.js). Und enden muss es auf:
-<source lang="html4strict">
+<source lang="javascript">
 //--><!]]>
    </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)
+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 unter "[[Navigationspunkte nicht verlinken]]" beschrieben ist (Und natürlich entsprechend die CSS Klassen der nicht verklinkten Seiten anpassen).
+'''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 [[ModulNavigation|Navigationsmodul]] erstellen:
@@ Zeile 47: / Zeile 47: @@
 * 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
+* 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.
+* 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 von gerade, dorthin packen wo man es haben möchte
+* Navigationsmodul aus Punkt 4 einbinden
-* MooTools-Templates: das eben erstellte moo_deviantMenu auswählen
+* MooTools-Templates ''moo_deviantMenu'' aus Punkt 2 aktivieren
 * Eigener JavaScript-Code:
-<source lang="html4strict">
+<source lang="javascript">
 <!-- Create a Deviant Menu Instance -->
 <script type="text/javascript" >
@@ Zeile 65: / Zeile 65: @@
 </source>
-(Damit initialisiert man das Menü)
+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!}}
+{{msgWarning|Wenn das Menü in einer HTML5 Seite (ab Contao 2.10) eingebunden wird, müssen die Templates die Endungen *.hmtl5 haben!}}
-{{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!}}
+{{msgImportant|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!}}
-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]
+Fortgeschrittene User können auch im ''moo_deviantMenu''-Script ein paar Einstellungen vornehmen. 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]

@@ Zeile 41: / Zeile 41: @@
 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.''' 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 unter "[[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]) :
+'''3.''' Ein neues [[ModulNavigation|Navigationsmodul]] erstellen:
 * Startlevel 0
 * Stoplevel 0