You are currently viewing 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).

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden


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

Dieser Beitrag hat 52 Kommentare

  1. Christian

    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

    1. Wolfgang Wagner

      Kann ca. 1000 Ursachen haben. Ich weiss ja auch nicht, was bei dir nicht richtig dargestellt wird.
      Vorschlag: komm in unser neues Forum und schildere dort mal ausführlich dein Problem, vielleicht finden wir eine Lösung. http://webdesign-forum.net

  2. Jan

    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

    1. Jan

      und nicht wie bei der 3ten Ebene
      li (sub1)
      ul
      –li (subsub1)
      /ul

      1. Wolfgang Wagner

        Versuch einfach mal die 2. ebene im Typoscript wegzulassen. Allerdings weicht dein Seitenaufbau ja von meinem ab, und da kann das Typoscript dann nicht passen.

  3. Hanz Maaz

    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

    1. Wolfgang Wagner

      Das ist klar, die Bezeichnungen müssen natürlich so vergeben werden, wie die Bereiche gemappt wurden.

  4. Jan

    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.

    1. Jan

      Irgendwie verschwinden beim Posten immer die html Tags 🙁

      1. Wolfgang Wagner

        Schön, das es jetzt funktioniert. 🙂
        Das mit den HTML-Tags ist Absicht, sonst wäre das ja eine offene Tür für Spammer & Co. 😉

    2. carsten

      ich habe genau das selbe Problem – ich bräuchte den code mal mit html tags um zu sehen wie du die ul und li eingebunden hast…
      danke

      1. Wolfgang Wagner

        Du meinst den HTML-Code für die Navigationsliste? Den findest du doch z.B. auf der Superfish-Website in den Examples.

  5. Jan

    Ich nochmal 😉
    was mach ich denn falsch wenn superfish mir den span für den schatten nicht mit einbindet?
    MFG Jan

    1. Wolfgang Wagner

      Hm, keine Ahnung, das wird ja normalerweise durch das Javascript erledigt. Ist die per Typosciprt erstelle Navi-Liste denn korrekt verschachtelt? Mal im W3C-Validator checken.

      1. Jan

        Ohh neee,
        lag wirklich daran das eine Klammer nicht geschlossen war.
        Boah manchmal….

  6. Marcel

    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.

  7. Jan

    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

    1. Jan

      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

  8. Michél

    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

    1. Wolfgang Wagner

      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 = 
    2. |
    3. allWrap.stdWrap.insertData = 1

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

  9. Jens

    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

    1. Wolfgang Wagner

      Danke für den Tipp, das werde ich mal testen.

  10. Martin Ott

    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

    1. Wolfgang Wagner

      Ja, das sollte gehen. Habe ich aber dafür noch nie benötigt.

  11. Michél

    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

    1. Wolfgang Wagner

      Hast du denn die Abo-Funktion für die Kommentare hier benutzt?

  12. Michél

    ja jetzt schon =)

  13. Ljubi B.

    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.

    1. Wolfgang Wagner

      Leider habe ich gerade nicht die geringste Ahnung, was du mit „nav-bar style“ meinst.

    1. Wolfgang Wagner

      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.

  14. Ljubi B.

    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.

  15. Wolfgang Wagner

    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:
    • Ljubi B.

      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.

    • Paulo Fernandes

      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

      1. Wolfgang Wagner

        Prinzipiell kannst du auf diese Art und Weise jedes Menü erstellen. Du müsst halt per Typopscript das Menü in der benötigten Struktur erzeugen und dann das JavaScript einbinden.

    • Elmar

      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?

      1. Wolfgang Wagner

        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.

    • Ralf

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

      1. Wolfgang Wagner

        Statt
        value=2
        Schreib mal
        special=directory
        special.value=2

    • Michael

      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

      1. 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.

      2. Wolfgang Wagner

        Ohne das Typoscript zu sehen kann man da nichts sagen.
        Eröffne doch bitte mal hier im Forum ein Thema dazu und zeige dein Navigationstyposcript, dann kann man sich das mal anschauen.

    • rendjy

      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?

      1. Wolfgang Wagner

        Hast du denn mal mit dem Firebug überprüft, ob die Bilder im CSS überhaupt korrekt eingebunden sind?

        1. rendjy

          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…

          1. Wolfgang Wagner

            Was heisst, da sind die Bilder nicht? Liegen die denn in dem Verzeichnis, das per CSS angesprochen wird? Wenn nicht, kopiere sie doch einfach dort hinein oder passe den Pfad entsprechend an.

            1. rendjy

              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 🙂

    • Ralf

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

    • Christoph

      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 🙂

    • Thomasss

      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!

    Kommentare sind geschlossen.