IF20 the Intelligent Framework – The Magnificent Developer Template

TYAML - Wiki

[Article: Superfish Menü | Diskussion ]
HomePage Reload page Edit Versions Download HTML

Inhaltsverzeichnis

[Edit]1 Superfish Menü

Superfish ist eine begehrte Menü-Erweiterung, die mittels jQuery ein voll funktionsfähiges CSS-Styled Menü animiert. Somit ist das Menü auch ohne Javascript funktionsfähig.

Mehr Informationen finden Sie hier: http://users.tpg.com.au/j_birch/plugins/superfish/

Ein Beispiel des Menüs sehen Sie hier: http://templates.if-20.com/index.php?id=235

Diese Add-on befindet sich in der Beta-Phase Bisher wurde ein horizontales Menü etabliert und getestet. Die grundlegende Gestaltung wurde dabei angepasst. Bei Fragen, Anmerkungen und Fehlern freuen wir uns auf eine Mitteilung im Forum (http://if-20.com/hilfe-community/forum/) oder direkt per E-Mail Zur Kontakt-Seite (http://if-20.com/kontakt/)



[Edit]1.1 Integration des Superfish Menüs

[Edit]1.1.1 Dateien kopieren

Laden Sie sich das TYAML Add-on von unserer Download-Seite (http://if-20.com/download/) herunter.

und kopieren Sie den Inhalt des Zip-Archivs auf den Server unter "fileadmin/deineDomain/template/3rdParty/". Alle Dateien des Superfish-Menüs sollten nun unter "fileadmin/deineDomain/template/3rdParty/superfish/" auf Ihrem Server liegen.



[Edit]1.1.2 Javascript einbinden & Anpassen

Zum einbinden der Javascript-Dateien muss die in der Datei "fileadmin/deineDomain/template/ts/setupCustom.ts" der folgende Code eingefügt werden:

< INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/deineDomain/template/3rdParty/superfish/config/setup.ts" >

(Zur Ausgabe in diesem Wiki wurden Leerzeichen hinter und vor die eckigen Klammern eingefügt, diese müssen bei der Einbindung entnommen werden.)

In der Datei "fileadmin/deineDomain/template/3rdParty/superfish/config/setup.ts" kann auf Wunsch das benötigte jQuery mit geladen werden. Löschen Sie dazu einfach das Rauten-Zeichen am Anfang der Zeile.

#  file50 = {$ftmTemplateUrl}3rdParty/superfish/js/jquery-1.9.1.min.js

Die Datei "3rdParty/superfish/js/settings.js" ist für die Initialisierung des Menüs verantwortlich. In dieser Datei können Sie auch weitere Einstellungen z. B. für die Animationsart treffen.


[Edit]1.1.3 Less einbinden

Um die grundlegenden CSS-Deklarationen einzubinden muss der folgende Code in die Datei "fileadmin/deineDomain/template/less/import.less" eingebunden werden.

@import url(../3rdParty/superfish/less/superfish.less);

Für weitere Anpassungen stehen Ihnen die folgenden unveränderten Dateien zur Verfügung:

  • superfish-navbar.less
  • superfish-vertical.less

Anmerkung:

In der TYAML Version 3.0.3 muss für die ID #areaNav noch eine Mindeshöhe vergeben werden. Dies können Sie z. B. mit der CSS-Deklaration
min-height: 40px;
in der Datei "fileadmin/deineDomain/template/less/area/3_nav.less" vornehmen.


[Edit]1.1.4 Menü anpassen

Damit das Superfish Menü nun funktioniert, muss das main-Menü im FTM-Template angepasst werden. Hierzu bearbeiten Sie das FTM-Template ihrer Root-Seite im TYPO3-Backend. Passen Sie das main-Menü folgend an:

  • Im Feld "Wrap" muss die Klasse "ym-hilst" entnommen werden. Der Code sieht nun wie folgend aus: (Leerzeichen bitte entnehmen)
< div >|< /div >
  • In der ersten Menü-Ebenen muss das Feld "Wrap" um die Klasse "sf-menu" erweitert werden. Der Code sieht nun wie folgend aus: (Leerzeichen bitte entnehmen)
< ul class="sf-menu" >|< /ul >
  • Aktivieren Sie das Feld "Untermenüs ausgeklappt"
  • Nun können Sie weitere Menü-Ebenen Anlegen. Bitte beachten Sie dabei, dass zur korrekten Anzeige "Menü-Zustände" angegeben sein müssen. Sofern ein weiteres Untermenü folgt muss zudem auch hier weider das Feld "Untermenüs ausgeklappt" aktiviert sein. Im Feld "Wrap" muss zudem mindestens folgender Code stehen: Leerzeichen bitte entnehmen)
< ul >|< /ul >


(Zur Ausgabe in diesem Wiki wurden Leerzeichen hinter und vor die eckigen Klammern eingefügt, diese müssen bei der Einbindung entnommen werden.)

Weitere Informationen zu den Menüs finden Sie im FTM-Wiki unter dem Punkt 7 Menüs (http://if-20.com/hilfe-community/wiki-documentation/fluid-template-manager/wiki/Menues/)



[Edit]1.1.5 Abschließend

Abschließend muss

  • das TYPOScript neu generiert ,
  • FTM-Cache geleert, sowie
  • Alle Caches löschen

im TYPO3 Backend durchgeführt werden.



Last changed: 23.05.2013 10:30 by Dieter Brüning - HomePage Reload page Edit Versions Download HTML

Folge uns ...

und bleib auf dem Laufenden ...

Kontakt zur Agentur

Büro Münsterland

if-20.com
Detlef Schäbel
Schöppingener Str. 21
48629 - Metelen Kreis Steinfurt
auch tätig in: Ochtrup, Gronau, Rheine,

Tel.: +49 2556 90 20 933
Home Office Neuenkirchen: +49 5973 7369780
Fax: +49 2556 90 20 942
E-Mail: info@if-20.com