TYPO3-Tutorial Teil 71: Einbau des Superfish-Dropdown-Menüs

|

Das Superfish-Menü ist ein jQuery-Plugin, mit dem sich auf einfache Art und Weise animierte Dropdown-Menüs erzeugen lassen, die sogar Cross-Browser-kompatibel sind. Außerdem beinhaltet es auch eine Fallback-Lösung für Besucher, die mit ausgeschaltetem Javascript auf die Seite kommen. Und das krasseste: es funktioniert sogar im IE6 (mit einem kleinen Trick).

Download des Superfish-Pakets: http://users.tpg.com.au/j_birch/plugins/superfish/

Die nötigen Codes in meinem Wiki.

Alle TYPO3-Tutorials kostenlos downloaden

52 Gedanken zu “TYPO3-Tutorial Teil 71: Einbau des Superfish-Dropdown-Menüs”

  1. Hallo Wolfgang. Erst einmal ein großes Lob. Der Kurs ist wirklich genial. Ich habe bei Video1 angefangen und hab mir eine Seite im Grunde genommen genau so wie im Kurs erstellt.
    Mir ist leider erst jetzt aufgefallen, dass die Seite erst ab InternetExplorer8 richtig dargestellt wird (hab immer im Firefox gearbeitet). Woran könnte das liegen?

    Viele Grüße aus Düsseldorf
    Christian

  2. Hi wolfgang,

    ich komm mal wieder nicht weiter mit der Superfish Navigation.Vll. könntest du mir weiter helfen.

    Mein Seitenaufbau sieht so aus:

    ROOT
    –Navigation Oben (in Navi ausgeblendet)
    —-Startseite
    —-Button2
    ——sub1
    ——sub2
    —-Button3
    —-Button4
    ——sub1
    ——–subsub1
    ——sub2

    Nun wird nach deiner Anleitung nur die subsub1 ausgeblendet. Alle sub1 und sub2 werden angezeigt.
    In meinem html code sieht dies so aus:

    li (Startseite)
    li (Button2)
    li (sub1)
    li (sub2)

    und nicht wie bei der 3ten ebene

    sub1
    subsub1

    Mein Typo-Skript ist das selbe wie bei dir.

    Ich hoffe mir kann einer helfen. Danke

  3. Klasse Superfish.
    Musste allerdings beim Einbinden der Navigation die Zeile
    „lib.nav“ in „lib.navigation“ ändern,
    also „lib.navigation = HMENU“ statt „lib.nav = HMENU“,
    weil ich das damals „nach Kurs“ so definiert hatte.
    Klasse, Danke

  4. Hi Wolfgang,

    hatte es gestern schon hinbekommen 😉

    mein TS sieht nun so aus:

    lib.navTop {
    wrap = |

    1 = TMENU
    1 {
    expAll = 1
    noBlur = 1
    NO = 1
    #NO.wrapItemAndSub= |

    NO.wrapItemAndSub = |
    NO.allWrap.dataWrap=|*||*|

    CUR = 1
    CUR.wrapItemAndSub = |

    }

    2 < .1
    2.wrap = |

    3 < .2

    }

    Trotzdem Danke für die schnelle Hilfe.

  5. Hab das gleiche Problem wie Jan. die Ebene 2 also das erste Submenü wird bei mir angezeigt. Versuche schon die ganze Zeit den Fehler zu finden. Liegt warscheinlich an irgend einer CSS-Klasse die fehlt, die eben die 2. Ebene ausblendet.

  6. Und Ich wieder 😉

    Kleine Frage am Rande…
    kann man eigentlich bei dem Superfish Menu die hideWhenNotOver time einstellen?

    Ich finde nur nirgends die Einstellung.

    MFG

    • Immer wenn Ich etwas poste komme Ich schon selber auf die Lösung. 😀

      Ich hab in der superfish.js das delay einfach auf 0 gesetzt.

      MFG und schönes Wochenende

  7. Hi, ich würde gern jedem Menüpunkt eine eigene Klasse zuweisen. Habt Ihr eine Idee wie ich das am besten realisieren kann?

    Schonmal vielen Dank im Vorraus!

    Gruss

    • Das lässt sich recht einfach per Typoscript lösen. Du könntest deinen Seiten in den Seiteneigenschaften z.B. im Feld „Untertitel“ die Klassen zuweisen und das ganze dann per Typoscript auslesen. Siehe dazu diesen Artikel in meinem Wiki: http://wiki.wowa-webdesign.de/doku.php?id=typo3:standardnavigation-mit-id

      In diesem Typoscript wird zwar jedem li eine ID mit dem alias der Seite zugewiesen, das solltest du aber leicht umbauen können. Wichtig sind diese beiden Zeilen:

      allWrap = 
    • |
    • allWrap.stdWrap.insertData = 1

      Die müsstest du an deine Bedürfnisse anpassen.

  8. Hallo Wolfgang,

    erst mal vielen Dank für dieses Tutorial. Endlich mal ein schönes / funktionierendes Dropdown Menü.

    Ich habe noch eine Ergänzung zu dem JavaScript. Ich hatte in Typo3 Probleme mit den Extension rgtabs und dropdown_sitemap. Diese benutzen ein anderes JavaScript-Framework und somit funktionierte das Menü nicht mehr.

    Nachdem ich aber den Code folgendermaßen geändert habe ging es wieder 🙂

    $.noConflict();
    jQuery(document).ready(function($) {
    // initialise plugins
    $(document).ready(function(){
    $(„ul.sf-menu“).supersubs({
    minWidth: 11, // minimum width of sub-menus in em units
    maxWidth: 27, // maximum width of sub-menus in em units
    extraWidth: 1 // extra width can ensure lines don’t sometimes turn over
    // due to slight rounding differences and font-family
    }).superfish({
    animation: {opacity:’show‘,height:’show‘,width:’show‘},
    speed: ‚fast‘
    }); // call supersubs first, then superfish, so that subs are
    // not display:none when measuring. Call before initialising
    // containing tabs for same reason.
    });
    });

    Ist vll. für andere auch ganz Hilfreich.
    Weitere Informationen hierzu gibt es unter http://api.jquery.com/jQuery.noConflict

  9. Hallo Wolfgang,
    vielen Dank für dein klasse Tutorial. Hat auch bei mir alles super funktioniert. Eine Frage habe ich noch: Kann man in deinem TS auch einen entryLevel und eine excludelist definieren?

    LG
    Martin

  10. Hi Wolfgang!

    Habe leider gar keine Benachrichtigung über Deine Antwort bekommen… Habs dadurch jetzt erst gelesen und wollte mich für Deinen Post bedanken!! Genau wie Du es beschrieben hattest, habe ich es dann auch gelöst =)

    Liebe Grüße
    Mic

  11. Hallo Wolfgang!
    Dank Video Tutorial ist alles wunderbar gegangen, jetzt hätte ich gerne stat „clasic style“—> „nav-bar style“ als Menue einsetzen. Der unterschid liegt was ich seehen könte nur an .css datei, hast du mal probiert nav-bar style zu installieren?? Wie geht man vor bei „nav-bar style“ installation. Danke.

    • Ach so, nee, die habe ich noch nie verwendet. Aber in dem dort zu sehenden Code ist doch eigentlich klar, was du machen musst, du musst halt eine zusätzliche CSS-Datei einbinden. Halt dich einfach an den HTML-Code, der dort zu sehen ist.

  12. Also irgend wie komme ich nicht weiter, in css Datei stehet folgendes:

    adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu

    also, ich soll ’ne classe definieren mit name: sf-navbar, nur wo?, in welche datei,?? hebe versucht in superfish.css ganz am anfang —> class=“sf-navbar“ aber nix. Bitte um hilfe. Danke.

  13. Schau dir doch einfach mal den HTML-Code auf der Beispielseite an, z.B. mit Firebug.

    Du musst wohl nur der

      des Menüs die Klasse sf-navbar zusätzlich geben (…in addition…), im Beispiel sieht das so aus:

    • Ich habe das so gelöst wo ich im my_layout.html template classe „hlist“ im sf-navbar umbenennt. Ob das richtig ist oder nicht kann ich nicht sagen aber es funktioniert. Ich bedanke mich bei dir trotzdem.

    • Danke für das Videotutorial. Es ist fast, das was ich suche. Ist es auch möglich, damit ein Mega Menü zu erstellen? Hier ein Beispiel wie ich mir das vorstelle: http://themes.no/switch/?theme=powerplay. Mouseover wie bei shortcode generator. Das heisst ich möchte unter einem Navibutton mehrere Überschriften mit jeweils einigen Unterpunkte. Gibt es dafür eine extra extension oder gibt es eine andere Möglichkeit das mit Typo3 zu realisieren?

      Würde mich über ein feedback sehr freuen

      Danke schon mal

    • Jetzt hat es mich doch noch gepackt und ich schau mir einige der Tutorials an. Vielen Dank! Meine Frage: Gibt es Tutorien, die für dieses hier zwingend Voraussetzung sind?

      • Das kann ich dir so direkt jetzt gar nicht sagen. Es hängt sicher auch von deinem allgemeinen Kenntnisstand bei TYPO3 ab. Wobei hier natürlich die Übungsseite bearbeitet wird, die ich im Laufe des Kurses aufgebaut habe. Aber schau es dir einfach, dann merkst du ja, ob dir irgendwo etwas fehlt.

    • Hallo,
      wirkliche tolle Videos hast du erstellt, einige habe ich auch schon ausprobiert, und nun habe ich mal ein Problem mit der SUPERFISH-Geschichte. Es funktioniert soweit, allerdings wird mir nicht die richtige Ebene angezeigt. Ich möchte das die Seite mit der ID 2 und alle dazugehörigen Unterseiten das Menü bilden.

      Hier mal das Script:
      MAIN_MENU = HMENU
      MAIN_MENU {
      value = 2
      wrap = |

      1 = TMENU
      1 {
      expAll = 1
      noBlur = 1
      NO = 1
      NO.allWrap= |

      CUR = 1
      CUR.allWrap = |

      }

      2 = TMENU
      2 {
      expAll = 1
      noBlur = 1
      NO.wrapItemAndSub = |

      CUR = 1
      CUR.wrapItemAndSub = |

      ACT = 1
      ACT < .CUR
      }

      3 < .2
      3.wrap = |
      }

    • Hallo Wolfgang,

      auch ich sage erst einmal danke für das Video. Nicht nur dieses sonder auch die anderen Videos zum Thema Typo3 haben mir sehr geholfen. Ich bekomme leider gerade den klassischen „falschen“ Fehler und komme einfach nicht weiter. In der ersten Eben (vom Menue aus gesehen – Home) klappt alles prime und der TAG wird auch richtig mit den Klassen in das HTML geschriben >>

      Wenn ich nun auf eine Link den Menues klicke schreibt Typo3 nur noch folgenden TAG ins HTML >> und das Menue funktioniert nicht mehr richtig ( Grafik und die supersubs Funktion gehen dann nicht mehr). Alles ist von der root Seite (im typoscript) aus angebunden und sollte eigedlich gehen? Hast Du einen Rat.

      Danke Gruß – Michael

      • ups, die TAG waren nicht drin in meine Kommentar, also noch mal.

        1.) class=“sf-menu sf-js-enabled sf-shadow“ >> richtig
        2.) class=“sf-menu“ >> falsch, aber warum das so ist, ist mir noch nicht klar.

    • Erst einmal danke für alle Videotutorials!

      Bei mir funktioniert alles,bis auf die Pfeile und der Schatten. Die werden einfach nicht angezeigt, egal was ich mache. Die Bilder sind auch im richtigen Ordner wie auf dem Video zu sehen ist!

      Hat jemand vielleicht einen Tipp für mich?

        • Ja, das habe ich… und da sind die Bilder nicht.
          Was bedeutet das?
          Ich kenne mich nicht so gut aus, aber habe die ganze Seite nach den Tutorials gebaut und glaube, dass alles richtig gemacht ist…

            • Die Bilder liegen im Ordner Images, wie bei dir im Video.
              Den Pfad habe ich auch, wie im Video mit ../ gezeigt, angepasst.
              Allerdings wenn ich mir die Seite mit dem Firebug anschaue werden dort nur die Parameter des Menus – Farbe, Größe etc. angezeigt, aber keine Pfade zu den Buldern. Ich hoffe ich habe mich richtig ausgedrückt…bin neu beim Seitenbau 🙂

    • Hallo,
      ich habe immer noch das Problem, das das Menü nicht aufklappt. Ist alles eingebunden, aber irgenwie will es nicht hinhauen.

      Hier mal das TS:

      MAIN_MENU = HMENU
      MAIN_MENU {
      special = directory
      special.value = 1
      wrap = |
      1 = TMENU
      1 {
      expAll = 1
      noBlur = 1
      NO = 1
      NO.allWrap= |
      NO.stdWrap.htmlSpecialChars = 1

      CUR = 1
      CUR.allWrap = |
      CUR.stdWrap.htmlSpecialChars = 1
      }

      2 = TMENU
      2 {
      expAll = 1
      noBlur = 1
      NO.wrapItemAndSub = |
      NO.stdWrap.htmlSpecialChars = 1

      CUR = 1
      CUR.wrapItemAndSub = |
      CUR.stdWrap.htmlSpecialChars = 1

      ACT = 1
      ACT < .CUR
      }
      }

    • Wow – super…
      Danke für das Hammer-Tutorial!!!!

      Gibt es auch eine Möglichkeit, das aufgeklappte Menü wieder einfahren zu lassen???

      Das wäre noch der Oberhammer 🙂

    • Hallo, von mir auch ein Dankeschön für das Tutorial. Eine Frage bzw. ein kleines Problem habe ich noch:
      Seitenstruktur:
      root
      -Menu1
      –Unterseite1-1
      —Unterseite1-1-1
      —Unterseite1-1-2
      –Unterseite1-2
      —Unterseite1-2-1
      —Unterseite1-2-2

      Die ID der Seite „Menu1“ ist die 2, die Seite dient nur zur Strukturierung/Übersichtlichkeit der Seite/des Seitenbaums (es gibt noch Menu2 und Menu2, jeweils mit Unterseiten).

      Im Typoscript habe ich
      NAV1 = HMENU
      NAV1.special = list
      NAV1.special.value = 2

      Ergebnis (Darstellung Menü):
      Menu1 Unterseite1-1 Unterseite 1-2

      Die Dropdownmenüs funktionieren, aber die Seite „Menu1“ soll nicht anzeigt werden.

      Wenn ich im TS statt „list“ „directory“ nehme ist das Ergebnis (Darstellung Menü):
      Unterseite1-1 Unterseite1-1-1 Unterseite1-1-2 Unterseite 1-2 Unterseite1-2-1 Unterseite1-2-2

      Also alle Seiten nebeneinander ohne Dropdown.

      Hat jemand eine Idee, woran das liegen kann?

      In Wolfgangs Video liegen die Seiten (Home etc.) direkt in der Root. Das habe ich auch ausprobiert, aber dann steht statt „Menu1“ eben „root“ ganz vorne.

      Danke für jede Hilfe!

    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?