Mootools Deviant Menu: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
(Aufbereitung)
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 2: Zeile 2:
 
[[Category: Admin_HOWTOS]]
 
[[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;)
 
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*
 
...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.
 
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.
 
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:
 
Beginnen muss das Script mit:
  
−
<source lang="html4strict">
+
<source lang="javascript">
 
<script type="text/javascript">
 
<script type="text/javascript">
 
<!--//--><![CDATA[//><!--
 
<!--//--><![CDATA[//><!--
Zeile 34: Zeile 34:
 
dann folgt der normale Code (die ehemalige deviantMenu.js). Und enden muss es auf:
 
dann folgt der normale Code (die ehemalige deviantMenu.js). Und enden muss es auf:
  
−
<source lang="html4strict">
+
<source lang="javascript">
 
//--><!]]>
 
//--><!]]>
 
   </script>
 
   </script>
 
</source>
 
</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 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.xhtml/tpl wie es unter "[[Navigationspunkte nicht verlinken]]" beschrieben ist (und natürlich entsprechend die CSS-Klassen der nicht verlinkten 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]) :
+
'''4.''' Ein neues [[ModulNavigation|Navigationsmodul]] erstellen:
 
* Startlevel 0
 
* Startlevel 0
 
* Stoplevel 0
 
* Stoplevel 0
 
* Referenzseite (keine bzw. Startpunkt oder was man möchte)
 
* 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.
  
−
'''4.''' Im Seitenlayout:
+
'''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 ;) !)
 
* 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:
 
* Eigener JavaScript-Code:
  
−
<source lang="html4strict">
+
<source lang="javascript">
 
<!-- Create a Deviant Menu Instance -->
 
<!-- Create a Deviant Menu Instance -->
 
<script type="text/javascript" >
 
<script type="text/javascript" >
Zeile 65: Zeile 65:
 
</source>
 
</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. 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!}}
  
−
{{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!}}
+
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]
−
 
+
−
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]
 
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]

Aktuelle Version vom 27. August 2011, 21:56 Uhr

betrifft
TYPOlight Version 2.8.x
Contao Version ab 2.9

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!

"Warnhinweis"



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!

"Wichtig"


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

Von „https://de.contaowiki.org/index.php?title=Mootools_Deviant_Menu&oldid=4161“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Andreas, leg dich da hinten hin und schlaf, dann kommen wir vorwaerts.

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge