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
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
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
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
und nicht wie bei der 3ten Ebene
li (sub1)
ul
–li (subsub1)
/ul
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.
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
Das ist klar, die Bezeichnungen müssen natürlich so vergeben werden, wie die Bereiche gemappt wurden.
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.
Irgendwie verschwinden beim Posten immer die html Tags 🙁
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. 😉
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
Du meinst den HTML-Code für die Navigationsliste? Den findest du doch z.B. auf der Superfish-Website in den Examples.
Ich nochmal 😉
was mach ich denn falsch wenn superfish mir den span für den schatten nicht mit einbindet?
MFG Jan
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.
Ohh neee,
lag wirklich daran das eine Klammer nicht geschlossen war.
Boah manchmal….
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.
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
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:
Die müsstest du an deine Bedürfnisse anpassen.
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
Danke für den Tipp, das werde ich mal testen.
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
Ja, das sollte gehen. Habe ich aber dafür noch nie benötigt.
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
Hast du denn die Abo-Funktion für die Kommentare hier benutzt?
ja jetzt schon =)
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.
Leider habe ich gerade nicht die geringste Ahnung, was du mit “nav-bar style” meinst.
Sorry, unglüchlich ausgedrückt…
Damit meinte ich die Examples auf superfish-seite.
Link:
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
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.
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.
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
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.
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 = |
}
Statt
value=2
Schreib mal
special=directory
special.value=2
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.
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.
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?
Hast du denn mal mit dem Firebug überprüft, ob die Bilder im CSS überhaupt korrekt eingebunden sind?
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…
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.
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 🙂
Das macht es doch automatisch!?
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!