TYPO3-Tutorial 2012-21 – HTML-Vorlage in TYPO3 integrieren – Teil 8 – NAVIGATIONS – Superfish

|

In diesem Video erzeugen wir per Typoscript unser Hauptmenü. Dabei versuchen wir, die HTML-Struktur der Hauptnavigation per Typoscript nachzubauen.

21 Gedanken zu “TYPO3-Tutorial 2012-21 – HTML-Vorlage in TYPO3 integrieren – Teil 8 – NAVIGATIONS – Superfish”

  1. hy wolfgang, sehr gut erklärt dieses video. Hast du eine Ahnung wie man das super fish menü so abändern kann, sodass das aufgeklappte menü horizontal dargestellt wird.

    Gruß alex

  2. Hallo Wolfgang, danke für die Videos!

    Eine Ergänzung zum Menu:
    Du sagst zu Anfang, das Superfish-Menu wird durch JavaScript generiert und es ist aber dank CSS auch ohne JavaScript lauffähig.
    Ich würde es eher anders formulieren: Das Superfish-Menu wird von Typo3 als geschachtelte Liste mit CSS-Klassen generiert und dank JavaScript gibt es einiges zusätzliches Eyecandy.

    Diese Formulierung „Menu wird durch JavaScript generiert“ lässt sicher bei vielen Webmastern die Klappe fallen, da sie Probleme bei der Suchmaschinentauglichkeit befürchten. Die hören dann gar nicht weiter….

  3. Hallo Wolfgang,

    du hast in deinem Beitrag erwähnt, dass das Menu Probleme machen kann, wenn man auf der Seite noch andere EXT nutzt die JS verwenden. Wenn man das möchte, wie kann man dann vorgehen?

    Gruß Carsten

    • Das kommt darauf an. Superfish verwendet ja jQuery. Deshalb wird es zu Problemen kommen, wenn du eine Extension nutzt, die ein anderes Javascript-Framework verwendet, z.B. Prototype oder Mootools. In so einem Fall ist die einfachste Methode, so eine Extension nicht zu verwenden.

      Es kann aber auch vorkommen, dass eine Extension, z.B. Powermail, auch jQuery verwendet, dieses aber nochmal im Quelltext einbindet. Das führt u.U. auch zu Problemen. In so einem Fall kannst du entweder das automatische EInbinden deaktivieren, z.B. im Konstanteneditor der Extension, oder du bindest jQuery nicht mehr manuell ein.

      Je nach Extension kann der eine oder andere Weg der bessere sein.

  4. Hallo Wolfgang,

    ersteinmal recht vielen Dank für diese Videos, hat mir wirklich einige Wochen Arbeit gerettet.
    Ich hab bis jetzt immer nur ganz normale HTML (CSS) Seiten erstellt und hatte bis jetzt erst ein mal mit Webspell zu tun, sonst hab ich mich noch nie in einem CMS versucht. Dank deinen Videos komme ich auch immer mehr zu meiner ersten Seite mit TYPO3, nur im Moment komm ich echt nicht weiter.
    Ich habe alles gemapt und die CSS datein werden nun auch erkannt ( nach 2 wochen Nacharbeit ). Mein Problem ist nun das zwar mein Menü angezeigt wird aber leider nur ohne CSS, d.h. meine Button Grafik wird nicht angezeigt und meine Schriftart ist auch nicht die richtige. Vieleicht hast du eine Idee, das andere was ich nicht versteh ist, solang ich im Backend eingeloggt bin wird mir mein Frontend meist anders angezeigt wie wenn ich die einfache Base Domain nach dem ausloggen aufruf. Ich hoff ich hab das jetzt nicht zu kompliziert erklärt.
    Würde mich sehr freuen von dir zu hören. Hier noch meine URL falls du es mal anschauen willst: http://www.rhb-mediendesign.de

    • Das kann jetzt ca. 1000 Ursachen haben… 😉

      Meistens ist doch noch irgendwo ein Tippfehler versteckt, sei es im Typoscript, im Templavoila-Mapping oder vielleicht auch im CSS. Unter dem Link von dir sehe ich übrigens, dass in den Menülinks die Trebuchet als Schriftart verwendet wird und auch ein Background-Image eingebunden ist. Das wird hier im Browser auch korrekt angezeigt.

      Zu den Backend-Frontend unterschieden: du musst darauf achten, die gleiche URL zu nutzen. Wenn du z.B. im Backend über http://www.deinedomain.de drin bist, das Frontend aber ohne www aufrufst (oder umgekehrt), kann es Problemchen geben.

      Wenn die Probleme weiterhin bestehen, nutze bitte das Forum für weitere Fragen, das ist ein wenig praktischer dafür.

      • Ok ich danke dir erstmal für deine schnelle Antwort. Ich geh das ganze am besten nochmal durch, wenn es geklappt hat dann sag ich bescheit woran es lag 😀

        • So ich noch mal ;),
          es lag an der CSS, ich hab diese nochmal überarbeitet und nun geht alles.
          Der Unterschied zwischen Backend und Frontend geht nun auch, ich war im Backend ohne www und im Frontend mit :D.
          Ich bedank mich noch mal bei dir für die schnelle Antwort. Mach weiter so mit deinen Videos, die sind Gold wert :).

  5. Hallo ihr Lieben,
    da ihr ja hier alle Profis seit, könnt mir vielleicht jemand ein bisschen weiterhelfen. Erst mal super Arbeit Wolfgang, für die ganzen Videos. Die haben mir sehr viel gebracht und ich bastle nun schon ewig für ein passendes Typo3 Template. Hab mir den „Introduction Package“ von Typo3 zu nutzen gemacht und ändere das Layout stück für stück, schön an meine Bedürfnisse angepasst. Leider komm ich jetzt an meine Grenzen. Folgendes Problem, ich hab so viele Einträge in meinem Horizontalen Menü, dass ich es etwas anpassen will. Superfish hab ich mir noch nicht so genau angesehen… Mein Typo3 soll, wenn möglich, sobald das Menü voll ist, einen „more…“ Button anbieten, in dem die restlichen Einträge aufgelistet werden. Am liebsten aber nicht mit so einem Pulldown Menü, sondern wie in meinem CSS Beispiel (http://141.40.103.207/bk/testing). Wenn man dort auf more… klickt, öffnet sich ein 2tes Menü. Am liebsten wäre mir es wenn Typo3 dies alleine anlegt . Also ich leg eine Seite an und Typo3 fügt es automatisch hinzu (siehe Beispiel-Bilder). Etwas viel Verwirrung jetzt, …seht euch es einmal an und ihr versteht vielleicht auf was ich hinaus will. Kann mir dabei jemand helfen? Danke

    • Davon würde ich prinzipiell abraten. Aus Usability-Gründen sollte eine Navigation nicht mehr als 5-7 Punkte haben. Wenn es bei dir wesentlich mehr sind, solltest du die Struktur deiner Website überarbeiten.

      • Danke für deine schnelle Antwort.
        Die Seiten-Struktur hab ich schon 2 mal überarbeitet, jedoch kann ich diese fast nicht weiter kürzen. Also ist es von der Bedienbarkeit wohl besser wenn ich auf so ein Pulldown Menü von Superfish umsteige oder?
        Eigentlich war meine Idee dass die Aufteilung der „Geschichtsseiten“ für den Nutzer nicht nur logisch/einfach nachvollziehbar ist, sonder auch den 3 Geschichts-Büchern sehr ähnelt, die dazu veröffentlicht wurden. Hab ja auch noch ein wenig zu kämpfen, dass ich die Titel für die Menü’s sinnvoll kürze… Wenn ich längere Titel habe und viele solcher Untermenüs, was würdest du da für eine Navigationsart vorschlagen?

  6. Hallo,

    auch von mir ein großes Kompliment für die super Videos.
    Ich hab da trotzdem ein kleines Problem mit meinem Menü, nicht so schwerwiegend aber stört mich doch schon etwas.
    Vorab, ich hab bis zu diesem Video alles nachgemacht habe (Template, Typoscript). Allerdings habe ich Typo3 6.0.
    Das Problem ist jetzt, dass im Gegensatz zum Video mein Menü den Link „Home“ nicht anzeigt, sondern stattdessen die Menüpunkte in der Ebene darüber, also „Inhaltselemente, Kontakt, Impressum“. Caches hab ich gelöscht, Videos bin ich nochmal durchgegangen, TS sind genau wie im Video.
    Das einzige was ich komisch finde ist, dass nur dan meine Seite angezeigt werden kann wenn ich zusätzlich noch in den Eigenschaften der Seite „Home“ das Template angebe (Use Template Design…), im Video wurde das allerdings nur mit ROOT gemacht.

    Hoffe ihr könnt mir helfen, Danke.

    • Ich vermute mal, dass vielleicht die Struktur deines Seitenbaumes nicht zum TS passt.
      Vorschlag: eröffne hier im Forum ein Thema dazu, füge einen Screenshot deines Seitenbaumes hinzu sowie das TS für die Navigationen. Dann schaun wir mal weiter 😉

      Ach ja, falls beim Versuch, dich im Forum zu registrieren, eine Meldung bekommst, du seist ein bekannter Spammer, einfach solange einen anderen Usernamen versuchen bis es klappt 😉

  7. Hallo,

    ein tolles Tutorial.
    Ich bin jetzt auf ein Problem gestoßen beim Durchgehen des Videos für die Navigation. Ich habe Typo3 4.7.8. Im normalen Zustand werden alle Ebenen wie im Video angezeigt. Sobald ich aber auf einen Punkt in Ebene klicke, wird das Menü falsch ausgegeben.

    Normal:



    HomeLeistungenHardwareSoftwareEntwicklungKontaktImpressum

    Nach Auswahl in Ebene 3:



    HomeLeistungenHardwareSoftwareEntwicklungKontaktImpressum

    Liegt das an Typo3 oder habe ich das verursacht?

    Gruß

  8. Hallo Wolfgang

    Ich schon wieder 😉 Ich habe meine Seite nun sehr weit angepasst (Logo, Schriftfarben, Hintergründen usw.) und nach einer Zeit, wahrscheinlich als es schon eine Weile so war, habe ich festgestellt dass das Menü beim runterscrollen mit der Seite mitscrollt. Im Video hast du ja mehrmals erwähnt dass das ein cooles Feature sei dass es immer im Bild bleibt. Leider nur wenns auch funktioniert 😉

    Weisst du wo ich eventuell ein Fehler gemacht habe oder wo ich das anpassen kann? Im Forum habe ich mal nach dem Problem gesucht aber nach superfish suchen gibt zu viele andere Vorschläge.

    Ich habe die Farben der Schrift und der Balken angepasst, ist vielleicht da was schiefgegangen? welcher Hinweis kann dir helfen? hier mein Site-Versuch: http://www.tanandbeauty.ch

    Vielen Dank jetzt schon für deine Hilfe
    thoem

    • Ohne jetzt die Zeit zu haben, deine CSS-Dateien durchzuschauen: da hast du wohl irgendwo eine Veränderung vorgenommen, den normalerweise sollte #nav mit position:fixed; am oberen Rand stehen bleiben. Aber wenn man das machrt, fällt alles zusammen. Also hast du wohl noch mehr verändert.

  9. Servus Wolfgang,

    habe nen Freund der ein Forum gemacht hat. Dieses ist schon paar Jahre älter und er möchte jetzt von Joomla auf Typo3 umsteigen. Er hat sich Artisteer 3 oder 4 geholt (weiß ich nicht genau) und damit ein Template erstellt, welches er mir jetzt in die Hand gedrückt hat und es auf die von mir aufgesetzte Seite haben will. Soweit auch kein Problem. Aber an einer Kleinigkeit stolpere ich gerade. Der Zustand CUR für einen Menüpunkt habe ich wie auch in deinem Tutorial immer mit | gemacht. Artisteer hat es in seiner CSS/html leider in dem Element gemacht. Bsp. Home.
    Wie bekomme ich dies mit TS hin? Oder soll ich mich lieber beimachen und die CSS anpassen?

Schreibe einen Kommentar

TYPO3 9 LTS Videotraining

Das Videotraining zu TYPO3 9 LTS

Momentan in Vorbereitung

Klicke hier für weitere Infos zum neuen Videotraining!

close-link
In Vorbereitung: Das Videotraining zu TYPO3 9 LTS
Hier klicken für mehr Informationen!
close-image

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?