English 
Deutsch 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.
Z.B. die vertikale Version des 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!
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 :)
@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 :-)
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.
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
Hallo Thomas,
du solltest dir das hoverIntent-Plugin entsprechend deiner Anforderungen konfigurieren:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Unter “Advanced Configuration Options” findest du die möglichen Optionen.
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
2. Frage hat sich gerade geklärt aber das mit dem zentrieren hab ich nicht hin bekommen