Tutorial: jQuery Dropdown Menü mit Superfish
Das für mich beste Skript, um dynamische Dropdown-Menüs zu erzeugen, ist das jQuery-Plugin von Joel Birch. Durch zahlreiche Parameter können wir uns das Multi-Level-Menü mit Leichtigkeit in Aussehen und Funktion unseren Anforderungen anpassen. Die Einbindung ist keineswegs schwer.
Auch auf diesem Blog habe ich das Superfish Dropdown-Menü von Joel Birch erfolgreich im Einsatz. Das Menü ist beliebig erweiterbar, es können also unendlich viele Unterebenen dargestellt werden.
IE Problems?
Superfish jQuery Menu IE z-index Bug (English)
Einbindung von Superfish in eine Website:
- Herunterladen des Skriptes – Superfish
- Einbinden des Stylesheets und des Javascript-Aufrufes in den Head-Bereich der Website
- Aufrufen der Superfish-Funktion im Head-Bereich der Website
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> <script type="text/javascript" src="superfish.js"></script>
Bemerkung:
Im Head-Bereich unserer Website binden wir das Stylesheet ein und rufen das Superfish-Javascript auf. Bitte beachten! Der Pfad muss möglicherweise angepasst werden. In obigem Beispiel gehen wir davon aus, dass das Website-Dokument, das Stylesheet und das Javascript auf einer Ordnerebene liegen.
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
</script>
Bemerkung:
Ebenso im Head-Bereich unseres Dokuments rufen wir nun die Superfish-Funktion mittels Javascript auf. Hierbei wird gesagt, dass das Superfish-Menü auf eine ungeordnete Liste ul mit der Klasse .sf-menu angewendet werden soll.
Anpassen der Menü-Parameter:
Wie schon angesprochen, lässt uns Joel Birch bei dem Aufruf der Superfish-Funktion zahlreiche Optionen die Funktionsweise des Dropdown-Menüs zu beeinflussen.
Folgende Parameter stehen uns zur Verfügung:
$.fn.superfish.defaults = {
hoverClass: 'sfHover', // the class applied to hovered list items
pathClass: 'overideThisToUse', // the class you have applied to list items that lead to the current page
pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass
delay: 800, // the delay in milliseconds that the mouse can remain outside a submenu without it closing
animation: {opacity:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method
speed: 'normal', // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
autoArrows: true, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
dropShadows: true, // completely disable drop shadows by setting this to false
disableHI: false, // set to true to disable hoverIntent detection
onInit: function(){}, // callback function fires once Superfish is initialised – 'this' is the containing ul
onBeforeShow: function(){}, // callback function fires just before reveal animation begins – 'this' is the ul about to open
onShow: function(){}, // callback function fires once reveal animation completed – 'this' is the opened ul
onHide: function(){} // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
};
Der Aufruf der Superfish-Funktion im Head-Bereich lässt sich nun beispielsweise wie folgt erweitern:
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish({
delay: 1000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
});
</script>
Bemerkung:
Mit diesen Parametern bestimmen wir also, dass das Dropdown eine Sekunde nach Mouseout ausgeblendet, eine leichte Einblendung über Transparenz und ein Slide-Down-Effekt mit schneller Geschwindigkeit haben soll. Außerdem werden keine Pfeile (wenn Unterpunkte vorhanden) angezeigt und kein Menüschatten erzeugt. Ihr seht bereits, was alles mit diesem Skript möglich ist.
Verschiedene Arten des Superfish-Menüs:
Neben den Optionen für Animationen und Geschwindigkeiten gibt es verschiedene Arten des Dropdown-Menüs.
1. Basic Style – horizontales Menü mit Dropdowns:
horizontale Menüleiste mit Dropdowns
Wie der Name schon sagt, ist der Basic Style die einfachste Form des Superfish-Menüs.
2. Vertical Style – vertikales Menü mit Dropdowns zur Seite:
vertikales Menü mit Dropdowns zur Seite
Um ein vertikales Menü anzuzeigen, brauchen wir lediglich ein zusätzliches Stylesheet einbinden und der ungeordneten Liste ul unseres Menüs mit der Klassen .sf-menu eine weitere Klasse .sf-vertical hinzufügen:
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> <link rel="stylesheet" type="text/css" media="screen" href="superfish-vertical.css" />
<ul id="menu" class="sf-menu sf-vertical">
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
3. Nav-bar Style – doppelte Menüleiste mit Dropdowns:
doppelte Menüleiste mit Dropdowns
Der Nav-bar Style ist ebenfalls sehr interessant. Er bietet eine doppelte Menüleiste, bei der ab der dritten Ebene Dropdowns angezeigt werden. Ebenfalls wird der Pfad zur aktuellen Seite im Menü wiedergegeben.
Auch hier muss nur das entsprechende zusätzliche Stylesheet eingebunden werden und die weitere Klasse .sf-navbar an die Liste weitergegeben werden.
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> <link rel="stylesheet" type="text/css" media="screen" href="superfish-navbar.css" />
<ul id="menu" class="sf-menu sf-navbar">
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
4. with Supersubs – Dropdown-Menü mit extralangen Unterpunkten:
Dropdown-Menü mit extralangen Unterpunkten
Die Option Supersubs bietet die Möglichkeit dynamisch auf besonders lange Unterpunkte zu reagieren, um Zeilenumbrüche im Menü zu vermeiden.
Um Supersubs einzubinden, müssen wir ein zusätzliches Javascript integrieren und den Aufruf der Superfish-Funktion etwas erweitern.
<script type="text/javascript" src="superfish.js"></script> <script type="text/javascript" src="supersubs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth: 12, // 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(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
});
</script>
Formatierung mit CSS:
Blau ist hübsch, aber nicht jedermanns Sache und nicht immer zum Rest der Website passend. Die Anpassung des Aussehens über CSS ist übersichtlich gestaltet und kann in folgenden Dateien vorgenommen werden:
- superfish.css
- superfish-vertical.css (bei Vertical Stlye)
- superfish-navbar.css (bei Nav-bar Stlye)
Support:
Sollte man Probleme mit der Einbindung und Anwendung von Superfish haben, kann man sich in die jQuery Mailing List eintragen und sein Anliegen dort kundtun.
Sowie Joel etwas Zeit hat, hilft er persönlich weiter, ansonsten tummeln sich dort auch sonstige schlaue jQuery-Köpfe.
Ich selbst hatte letzte Woche ein Problem mit der Einbindung von Superfish in WordPress. Innerhalb eines Tages war das Problem nach einigem Hin- und Her-Gemaile (tolles Wort!) gelöst.
A big big thanks to Joel for awesome support!
Fazit:
Das Superfish jQuery-Dropdown-Menü bringt eine unheimliche Vielfalt an Features mit sich. Wenn man sich auch nur ein wenig mit Einbindung von Skripten und XHTML/CSS auskennt, ist die Anwenung dieses Plugins überhaupt kein Problem und bietet einen beachtlichen Mehrwert für eine Website, ein Template oder WordPress-Theme.
Relevante Links:
- Superfish – Suckerfish on ‘roids
- Download – Superfish
- Support in der jQuery Mailing List
- Superfish jQuery Menu IE z-index Bug (English)
- Tutorial: jQuery Dropdown Menü für WordPress
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
32 Kommentare
Kommentar schreiben
30. Januar 2009
Sch***e, ist der Post lang geworden. Ich hoffe dennoch, dass er nachvollziehbar ist
18. Februar 2009
Hallo Simon
Ich habe das Superfish Menü im Einsatz und bin auch recht zufrieden damit.
Aber leider geht es nicht im IE6, wenn genau unter dem Text vom Menüpunkt ein Link ist, so wie auf der Seite(http://www.vulkana-wellness.at).
Ich habe schon alles mögliche mit dem Z-Index versucht, aber kein Erfolg.
Hast du eine Lösung?
Danke
Thomas
20. Februar 2009
@thomas:
Habe gesehen, dass Du #menuoben z-index 2 gesetzt hast. Das ist gut. Jetzt muss Du nur noch die darunterliegenden Container-divs #left, #right und #farright mit z-index 1 versehen. Versuch das mal. Das könnte klappen. Sag bescheid
18. Februar 2009
das tutorial ist wirklich wunderbar und auch verständlich.
ich habe aber auch probleme beim eindbinden in wordpress. ich hoffe, dass du dazu bald etwas schreibst, wie du es gesagt hast. dafür wäre ich dir sehr dankbar!
have a nice day
20. Februar 2009
@Stephen:
Fertig! Hier das neue Tutorial.
8. März 2009
Hi Simon!
Erst einmal vielen Dank für das tolle Tutorial!
Leider bekomme ich mit dem aktuellen IE immer einen JS-Fehler angezeigt. In FF3 läuft alles ohne Mucken.
Hast Du eine Idee, woran es bei mir liegen könnte?
10. März 2009
@Claas:
Moin Claas. Sorry für die späte Antwort. Das Problem, das Du beschreibst hatte ich auch mal in einem Kundenprojekt. Ich habe dann den Aufruf der Superfish-Funktion mit folgenden Zeilen ersetzt.
$(document).ready(function(){ $("ul.sf-menu").find('li.current_page_item,li.current_page_parent,li.current_page_ancestor,li.current-cat') .addClass('current') .parents('li') .addClass('current') .end() .end() });Danach lief es bei mir auch im IE. Ich bin allerdings wahrlich kein JS-Experte. Aber, wenn ich mich recht erinnere, störte sich der IE an dem Aufruf der Funktion superfish(). Wenn dies nicht hilft, müsstest Du die Frage mal in der Mailing-List stellen.
Viel Glück
24. Mai 2009
Okay, ich teste es morgen und melde mich dann!
Vielen Dank schon mal!
26. Mai 2009
Hallo,
Wie kann ich den aktuellen Menüpunkt hervorheben?
Normalerweise mach ich es mit:
#current {color:#0000CC;background-color:#999999; }
Wie funktioniert das mit Superfish?
27. Mai 2009
Hallo Kurt,
in dem Abschnitt ‘Anpassen der Menü-Parameter’ findest Du auch den Punkt pathClass. Dieser belegt alle betroffenden li-Tags mit der von Dir angegebenen Klasse. Es muss allerdings (nicht wie bei Dir eine ID) eine Klasse (.current) sein. Beim Aufruf des Superfish-Plugins für einfach pathClass: current hinzu. Die Listenpunkte kannst Du dann ja über CSS anprechen.
2. August 2009
Jo hat geklappt
THX nochmal!
5. August 2009
Wirklich ein klasse Tutorial, danke!
5. August 2009
Vielen Dank
Das Plugin hat es auch verdient.
1. September 2009
Hallo Simon und Alle die IE6 kompatibel sein müssen.
Für ein Projekt wird YAML eingesetzt und superfish.
Ich habe nach langem Suchen herausgefunden, dass beim Aufruf von supersubs
$(“#submenu”).supersubs({
minWidth: 14, // minimum width of sub-menus in em units
maxWidth: 14, // maximum width of sub-menus in em units
extraWidth: 0 // extra width can ensure lines don’t sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
pathClass: ‘active’,
disableHI: false,
delay: 50, // one second delay on mouseout
animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation
speed: ’slow’, // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
der IE 6 immer mit 2 Fehlern aussteigt.
1.Ungültiges Argument
2.Syntax Error.
Das Problem tritt auf wenn ein CSS Klasse ul li{} wie im YAML core 3.1 in der Datei nav_vlist.css den float aktiv setzt:
.vlist li {
float:left; /* LTR */
width: 100%;
margin:0;
padding: 0;
}
Jetzt habe ich das Problem, das der float schon da sein muss und ich auf die supersubs nicht verzichten möchte.
Vielleicht hatte jemand schon mal das Problem? Und vielleicht auch die Lösung?
9. September 2009
hallo!
habe nun superfish als horizontale navigation eingesetzt und bin eigentlich sehr zufrieden: doch wie kriege ich es hin, dass die zweite horizontale menü-ebene aufgeklappt bleibt und beim mouse-over über andere nav-punkte wieder verschwindet?
erste problem konnte ich lösen. doch beim mouseover bleibt die alte zweite leiste stehen und verschwindet nicht..
http://www.edvart.de/kunden/airleben
wäre sehr dankbar für tips!
9. September 2009
achja, ihr seht das problem nur bei flugerlebnis/rundflüge. der rest ist noch nicht verlinkt..
10. September 2009
hab das problem gefunden – ich depp hatte jquery auskommentiert..
14. September 2009
Hallo Simon
Kannst du mir helfen? Ich habe das Superfish-Modul installiert. Funktioniert wunderbar, bis auf das, wenn ich einen Menüpunkt im aufgeklappten Menü auswähle erscheinen meine Flash-Bilder nicht mehr, oben im Head-Bereich. Was stimmt da nicht? Ich habe einen Artikel im normalem Menü und den gleichen im Aufklappmenü ausgewählt. Und im Aufklappmenü zeigt er mir diesen Artikel zwar an aber eben ohne meine Bilder, die mit Flash dargestellt werden.
Hier die Seite http://getraenke-hecht.de/neues-template.html
Danke für deine Mühe!
Gruß Robert
16. September 2009
Hi Robert,
da kann ich Dir leider auch nichts zu sagen. Kann auf den ersten Blick nicht erkennen, warum Dein Flash ab und zu verschwindet. Würde Dir empfehlen, diese Frage mal in der Mailing-List zu stellen. Da ist das Thema Flash auch oft dabei.
30. September 2009
Hallo Simon,
finde superfish sehr gut.. möchte jetzt aber mehrere vertikale superfish-menüs in einem Template haben, links untereinander, aber es funktioniert nicht. Auch wenn ich auf Erweiterungen-Module-Neu-Superfish gehe und für das 2.Menü ein neues superfish anlege wird dann auf der website nur noch das 2.Menü angezeigt, der Rest ist komplett weg und es kommt die Nachricht: Fatal error: Cannot redeclare hasvalue() (previously declared in /www/htdocs/w00baa07/joomla/modules/mod_superfishmenu/helper.php:214) in /www/htdocs/w00baa07/joomla/modules/mod_superfishmenu/helper.php on line 214..
Kann man also 2 Superfish Menüs in einem Template haben?
Gruß Suse
26. Oktober 2009
Hallo Simon,
ich bin/war bis vor Kurzem eigentlich ziemlich großer Superfish-Fan, allerdings habe ich jetzt gemerkt, dass das Drop-Down-Menü in der aktuellen IE8 Version “zuckt”, sich also nach dem Ausklappen um einen Pixel nach rechts bewegt, was ich (und mein Kunde) für einen ziemlich unschönen Effekt halte. Kennt zufällig hier jemand eine saubere Lösung des Problems?
29. November 2009
Hallo zusammen!
Danke für die super Anleitung.
Mich wundert nur, dass nie die Frage auftauch wie man Schriftgröße und Schriftart und Schriftfarbe ändert.
Habe schon das ganze Internet abgesucht, aber wahrscheinlich mit den falschen Suchbegriffen……
Bin für einen kleinen Schupfer sehr dankbar!
16. Dezember 2009
Hallo zusammen!
Danke für die super Anleitung.
Ich habe auch das Superfish Menü im Einsatz und bin auch recht zufrieden damit.
Nur, wie kann ich auch main tab highlighten (active menu indikator) auch wenn man nur das sub categorien geklickt hat …wäre schön aus usability sicht!!
hab versucht änderung vorzunehmen..hats nicht funktioniert ;-(
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active , .sf-menu:active{
oder
.sf-menu .current_page_item a:hover {color: #fff;}
Hast du eine Lösung?
zlights@gmail.com
Danke
Reto
7. Januar 2010
Simon, ich finde das Tutorial sehr gut.
Danke für Deine Arbeit!
Und nun:
derzeit baue ich an einem neuem Template für einen Kunden. Ich habe mich damals für das Superfish Menü entschieden. Es leistet auch seine zweckmäßigen Dienste, jedoch gibt es im IE6 folgendes Dilema:
Beim Hovern der Buttons stürtzt der IE6 Browser ab.
Liegt es am javascript?
Was könnte ich da tun?
Lieben Gruss
20. Januar 2010
hallo zusammen,
ich hab das superfishmenu mit den supersubs im einsatz. allerdings bekomme ich im IE keine pfeilchen angezeigt ;o(
FF, Opera, Safari laufen alle ohne probleme und mit pfeilchen.
kann mir jemand weiter helfen?
LG Sandra
6. Februar 2010
@ iwd
Hatte ein ähnliches Problem, aber das nur an einem bestimmten Rechner. Schon mal auf einem anderen Arbeitsplatz mit dem IE 6 probiert?
8. Februar 2010
Hallöchen!
ich versuche gerade ein dropdown menü zu erstellen, das auch nach dem Klick noch geöffnet bleibt, solange bis ich einen anderen Menüpunkt auswähle. HAbt ihr eine Idee, wie ich das machen könnte?
18. Februar 2010
Hallo,
genau das selbe versuche ich auch verzweifelt seit einigen Tagen. Hat da mittlerweile jemand eine Lösung gefunden?
18. Februar 2010
Moin,
ich bin gerade dabei das superfish Menu in eine Applikation von mir in eine vorhandene Liste einzubauen, also die Menu Liste steht nicht alleine da, sondern wird in eine andere ungeordnete Liste eingefügt. Leider wird das Menu dabei sehr merkwürdig abgeschnitten, siehe hier: http://riedel-st.de/wp-content/uploads/2010/02/komisches-menu-300×63.png. Konnte dieses Problem schon mal jemand beobachten? BTW: Dieses Phenomän tritt in jedem Browser auf, also nicht nur bei dem aus Redmond…
18. Februar 2010
schaut mir aus, als ob der container, in dem das menu drinne ist eine feste höhe hat >> dadurch wird das superfish abgeschnitten. probier mal die höhe aufzuheben bzw. mit z-index ….
Hat jemand eine Idee was ich mit meinen Preilchen im IE machen kann??? Die werden einfach nicht angezeigt ;o(
1. März 2010
ich möchte genau das gegenteil: keine pfeilchen.
wenn ich die standard pfeil bilder auskommentiere, kommen solche aus reinem text (>>). ich habe keine ahnung wo die herkommen!
jemand einen tipp?
1. März 2010
habe die lösung nach stunden doch noch gefunden:
im superfish.js gibt’s den parameter autoArrows: true (Zeile 91).
diesen auf false setzen, wenn man keine Pfeile will.