JavaScript Dropdown-Menüs mit Superfish

Dropdown-Menüs haben oft so ihre Tücken! Entweder funktionieren sie nicht in älteren Browsern, oder sie sind nicht sonderlich übersichtlich und ansprechend gestaltet. Neulich habe ich mich im Netz auf die Suche nach kreativ-gestalteten Dropdown-Menüs gemacht, und etliche schöne Lösungen entdeckt. Heute möchte ich dir das jQuery-Plugin »Superfish« vorstellen, mit dessen Hilfe du leicht schön animierte Dropdown-Menüs erstellen kannst.

Und so funktioniert’s

Auf der Webseite des Superfish-Plugins kannst dir das Superfish ZIP-Paket herunterladen.

Das Superfish-Plugin gibt es nicht nur als klassisches Dropdown, sondern auch noch in etlichen Varianten.

JavaScript Dropdown-Menüs

Z.B. die vertikale Version des DropDown-Menüs

JavaScript Dropdown-Menüs

Navigation-Bar Style des Plugins

Im ZIP-Download Paket sind Beispiel-Dateien der verschiedenen Plugin-Varianten bereits enthalten.

1. JavaScript-Code einfügen

Hast du dich für eine Variante entschieden, solltest du als erstes die JavaScript-Dateien superfish.js, hoverIntent.js (optional) und jquery-1.2.6.min.js auf deinen Server hochladen (am besten in einen eigenen Ordner mit dem Namen js).

Jetzt rufst du diese Dateien in deinem Dokument auf, indem du folgenden Code innerhalb des head-tags einfügst.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

(Vergiss dabei nicht den Pfad anzupassen, falls du deine JavaScript-Dateien in einem anderen Ordner abgelegt hast.)

Um das Plugin in seiner Grund-Version zu aktivieren, fügst du jetzt direkt darunter folgenden Code ein.

<script type="text/javascript">
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

2. CSS-Style Sheet einfügen

Im Download-Ordner findest du im Ordner CSS die superfish.css Datei. Lade diese ebenfalls auf deinen Server, und rufe sie mit folgendem Code im head-tag auf.

<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">

(Hier solltest du wieder auf den richtigen Verknüpfungs-Pfad achten. Ich habe die CSS-Datei in einen css-Ordner einsortiert.)

3. HTML-Code einfügen

Verwendest du jetzt folgenden HTML-Code in deinem Dokument, bekommst du die Grund-Version des Superfish-Dropdown-Menü angezeigt.

<ul class="sf-menu">
<li class="current">
<a href="#a">menu item</a>
<ul>
<li><a href="#aa">menu item that is quite long</a></li>
<li class="current">
<a href="#ab">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>	
</ul>

4. Zusätzliche Optionen

Natürlich hast du jetzt noch jede Menge Optionen, um die Animation und die Optik deines Menüs anzupassen.

Die Möglichkeiten der Anpassung kannst du dir auf der Options-Seite des Plugins heraussuchen, und entsprechend in deinen JavaScript Code einfügen.

Wie gefällt dir das Superfish-Plugin? Kennst du weitere tolle JavaScript-Plugins für Dropdown-Menüs? Wenn ja, welches ist dein Favorit? Ich freue sehr über deine Tipps!

10 Kommentare

  1. Dieses Plugin sieht sehr vielversprechend aus, vielen Dank für den Tipp. Grundsätzlich bin ich ja kein so grosser Fan von Dropdown-Menus, aber wie dein früherer Beitrag gezeigt hat, haben sie manchmal schon ihre Berechtigung. Ich werde mir diesen Tipp auf jeden Fall merken. Mir gefällt, dass das Plugin so einfach anpassbar ist :)

  2. @Barbara: Vielen Dank für deinen Kommentar :-) Ja, wenn man ein Dropdown benötigt ist dieses Plugin echt super. Und die Animationen sind ebenfalls echt schön :-)

  3. Hi Ellen,

    weißt Du zufällig, wie man die Dropdownfunktionalität für das sf Menü für ein responsive Design quasi deaktiviert? Ich würde gerne ab iPhone Landscape Größe komplett auf die Dropdowns verzichten und alle Menüpunkte einfach untereinander ausgeben. Hast Du ne Idee?

    Gruß
    Michael

    • @Michael,

      einfach abprüfen welcher Browser verwendet wird, das ist eine Standard jQuery Funktion.
      Was du noch tun kannst: implementiere im CSS ganz einfach Media-Queries, mit Hilfe derer
      kannst du die Navi mit einem Style einfach auf „display: none“ setzen.

  4. Hallo Ellen,
    ich habe das superfish menue in einen Shop eingebaut. Klappt auch wunderbar und das ganze läßt sich per css gut steuern.
    Nun habe ich ganz einfach das folgende Problem, der User kommt auf die Seite und fährt über das Menue nach oben, währenddessen klappt superfish bereits aus, das wollte ich steuern, so das das menue ers beim stillstand der Maus nach einigen millsekunden aufklappt.
    Leider finde ich nicht den richtigen Weg vielleicht hast Du eine Anregung hierzu?
    Gruß aus dem Norden von
    Thomas

  5. grinandbearit 18. März 2013

    Moin,
    habe das Menü gerade eingebaut und sieht echt gut aus.

    Kannst du mir sagen wie ich einstellen kann, dass es oben aber zentriert auf der Website angezeigt wird?

    Wenn ich unter das dropdown, welches sich im head befindet, etwas in den body schreibe wird es immer neben das dropdown geschmissen.

    Kannst du mir sagen wie ich ich einstellen kann das es auch wirklich unterhalb des dropdowns angezeigt wird?

    Danke,
    Grin

  6. grinandbearit 18. März 2013

    2. Frage hat sich gerade geklärt aber das mit dem zentrieren hab ich nicht hin bekommen

  7. Hallo Ellen,
    ich nutze die Superfish Navigation mittlerweile auf mehreren Websites, nicht zuletzt weil ich diesen Beitrag von Dir gefunden hatte. Dafür schon mal Danke.
    Die Superfish Navigation hatte aber ein Problem mit Win 8.1 und IE10+ auf Tablets und Smartphones. Da ist jetzt ein Update von der „superfish.js“ auf 1.7.5 gekommen das dieses Problem behebt.
    Siehe bei GitHub https://github.com/joeldbirch/superfish/issues/121
    Gruß Markus

  8. Hallo Ellen,
    ich habe auf einer Website das Supefish Plugin eingebaut. Irgendwie stürzt die Navi aber immer ab. Hast du vielleicht einen Anhaltspunkt woran das liegen könnte?

    Dank im Voraus.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *