Dropdown-Menüs haben oft so ihre Tücken! Entweder funk­tio­nieren sie nicht in älteren Browsern, oder sie sind nicht son­der­lich über­sicht­lich und anspre­chend gestaltet. Neulich habe ich mich im Netz auf die Suche nach kreativ-gestalteten Dropdown-Menüs gemacht, und etliche schöne Lösungen ent­deckt. Heute möchte ich dir das jQuery-Plugin »Superfish« vor­stellen, mit dessen Hilfe du leicht schön ani­mierte 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 klas­si­sches Dropdown, son­dern auch noch in etli­chen Varianten.

Im ZIP-Download Paket sind Beispiel-Dateien der ver­schie­denen Plugin-Varianten bereits enthalten.

1. JavaScript-Code einfügen

Hast du dich für eine Variante ent­schieden, soll­test du als erstes die JavaScript-Dateien superfish.js, hoverIntent.js (optional) und jquery-1.2.6.min.js auf deinen Server hoch­laden (am besten in einen eigenen Ordner mit dem Namen js).

Jetzt rufst du diese Dateien in deinem Dokument auf, indem du fol­genden Code inner­halb 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 anzu­passen, falls du deine JavaScript-Dateien in einem anderen Ordner abge­legt hast.)

Um das Plugin in seiner Grund-Version zu akti­vieren, fügst du jetzt direkt dar­unter fol­genden Code ein.

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

2. CSS-Style Sheet einfügen

Im Download-Ordner fin­dest du im Ordner CSS die superfish.css Datei. Lade diese eben­falls auf deinen Server, und rufe sie mit fol­gendem Code im head-tag auf.

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

(Hier soll­test du wieder auf den rich­tigen Verknüpfungs-Pfad achten. Ich habe die CSS-Datei in einen css-Ordner einsortiert.)

3. HTML-Code einfügen

Verwendest du jetzt fol­genden HTML-Code in deinem Dokument, gekommst 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 her­aus­su­chen, und ent­spre­chend in deinen JavaScript Code einfügen.

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