JQuery Dropdown Menü mit Superfish

In diesem Tutorial zeige ich euch wie man ein Dropdownmenü mit JQuery und dem JQuery Plugin Superfish realisieren kann. Das Plugin wurde von Joel Birch entwickelt und erfreut sich einer sehr großen Verbreitung. Ein Grund für die Popularität von Superfish ist sicherlich das es eigentlich nicht nur ein Dropdownmenü Plugin ist sondern ein universelles Menü Plugin bei dem dem Webdesigner große Freiheiten in der Gestaltung gelassen werden.
Beispielsweise kann man mit Superfish auch eine Navigationsleiste mit zwei Ebenen erstellen und diese mit dem Dropdownmenü kombinieren. Ich werde euch in diesem Tutorial alle wichtigen möglichkeiten von Superfish vorstellen und Anwendungsbeispiele dazu anbringen.

Eindinden von JQuery

JQuery kann man direkt von der Google API einbinden, was den Vorteil hat das es eventuell bereits im Cache des Homepage Besuchers liegt und somit die Ladezeiten verkürzt.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Download und einbinden von Superfish

Superfish gibt es nicht als gehostete Version weshalb man sich alle Dateien herunterladen und vom eigenen Server/Webspace aus einbinden muss.
Den Download findet man hier.
Für das standard Dropdownmenü muss man die Dateien superfish.css und superfish.js sowie die beiden halbtransparenten Grafiken arrows-ffffff.png und shadow.png. Am einfachsten ist es wahrscheinlich wenn ihr einfach den alle Dateien auf einmal downloadet.
Die .js und .css-Datei muss man einfach in das HTML-Dokument einbinden und die beiden Grafiken im gleichen Ordner ablegen wie die CSS Datei. Damit Superfish überhaupt gestartet wird muss man noch die Funktion superfish() aufrufen. Dieser können noch Parameter übergeben werden worauf ich später noch eingehen werde.

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' /> 
<script type='text/javascript' src='superfish.js'></script>

Der HTML Code für alle Fälle

Das Menü ist, egal welche der verschiedenen Versionen man verwendet, immer gleich aufgebaut, nämlich als verschachtelte, unsortierte Liste, der die Klasse .sf-menu mit auf den Weg gegeben wird.

<ul class='sf-menu'>
    <li><a href='#'>Menüpunkt</a>
        <ul>
            <li><a href='#'>Untermenüpunkt</a></li>
            <li><a href='#'>Untermenüpunkt</a></li>
            <li><a href='#'>Untermenüpunkt</a></li>
        </ul>
    </li>
    <li><a href='#'>Menüpunkt</a></li>
    <li><a href='#'>Menüpunkt</a></li>
</ul>

Damit hat man schon ein recht ansehnliches Dropdownmenü. Allerdings ist es noch in einem mehr oder weniger schönen grellen Blau und bis jetzt muss man sich von den Einstellungen her strickt an die Vorgaben des Programmierers halten. Hier kommen die oben bereits erwähnten Funktionsparameter ins Spiel.

Konfiguration des Menüs

Der Entwickler des Superfish Plugins hat dem Plugin nämlich jede Menge möglichkeiten zur Konfiguration des Menüs mitgegeben. Mit den folgenden Wertepärchen kann man das Menü konfigurieren. Man kann, wenn benötigt, alle Parameter verwenden, keiner von ihnen ist allerdings Benötigt damit das Menü funktioniert.

    hoverClass:    'sfHover',          // die Klasse welche momentan gehoverten Elementen zugeordnet wir
    pathClass:     'overideThisToUse', //die Klasse welche dem Menüpunkt zugwiesen wurde der zu der Seite führt auf der man sich gerade befindet 
    delay:         800,                //die verzögerung in millisekunden die das Menü offen bleibt wenn die Maus es verlässt 
    animation:     {opacity:'show'},   //das Gleiche wie der erste Parameter der .animate() Funktion von JQuery
    speed:         'normal',           //Geschwindigkeit der Animation. entweder fast,normal oder slow oder Millisekundenwert
    autoArrows:    true,               //wenn auf true gesetzt, werden Pfeile automatisch hinzugefügt 
    dropShadows:   true,               //schlagschatten werden bei false komplett ausgeschaltet, Defaultwert: true 
    disableHI:     false,              //auf true schalten um das JQuery Plugin HoverIntent für das Menü zu deaktivieren. Nur benötigt wenn HoverIntent verwendet wird.

Die Erklärungen stehen jeweils in Form von Javascript-Kommentaren hinter den Parametern. Einige davon sind schwer zu verstehen da sie fortgeschrittene JQuery kentnisse voraussetzen. Diese sind allerdings nicht unbedingt wichtig und werden wahrscheinlich auch nur von Webmastern mit sehr hohen Ansprüchen verwendet.

Die Parameter lassen sich relativ einfach verwenden:

$(document).ready(function() { 
        $('ul.sf-menu').superfish({ 
            delay:       500,                             //eine halbe Sekunde verzögerung vor Schließen des Menüs 
            animation:   {opacity:'show',height:'show'},  // fade-in und slide-down animation 
            speed:       'fast',                          // schnelle Animationsgeschwindigkeit 
            autoArrows:  false,                           // Pfeile deaktivieren 
            dropShadows: true                             // Schlagschatten aktivieren 
        }); 
    }); 

</script>

Der Funktion superfish() werden die Parameter einfach als Wertepaare übergeben.
Damit das ganze etwas geordneter aussieht habe ich es schön eingerückt und untereinander geschrieben.
Diese Parameter kann man in jeder Version und Ausführung des JQuery-Plugins verwenden.

Die Gestaltung des Menüs mit CSS

Natürlich kann man das Menü auch noch nach eigenen Vorlieben gestalten.
Dies funktioniert über die beim Download mitgelieferte CSS-Datei.
In dieser CSS-Datei gibt es zwie verschiedene Abschnitte welche jewils durch CSS-Kommentare gekennzeichnet sind.
Der erste Abschnitt beinhaltet die CSS-Anweisungen welche nicht verändert werden dürfen.

Er bekinnt mit dem CSS-Kommentar:

 

/*** ESSENTIAL STYLES ***/

Ab dem Kommentar

/*** DEMO SKIN ***/

Hierzu kann ich schlecht ein Konkretes Beispiel bringen da ich dazu die Komplette CSS-Datei hier abbilden müsste was den Rahmen des Tutorials sicherlich sprengen würde.
Ein Beispiel ist eigentlich auch nicht nötig da man das Menü wie gewohnt mit CSS gestalten kann.

Andere Varianten des Superfish Menüs

Um die anderen Varianten des Superfish Menüs zu nutzen muss man einfach anstatt der normalen superfish.css-Datei die superfish-vertical.css für ein vertikales, ausklappbares Menü und die superfish-navbar.css für eine Navigationsleiste einbinden.
Die Gestaltung und Konfiguration funktioniert auf die gleiche weise wie das standard Superfish-Menü.

Ich hoffe ich konnte euch mit diesem Tutorial weiterhelfen und würde mich über Feedback, Lob, Kritik oder Anregungen in Form von Kommentaren oder einer E-Mail freuen.
Bei Fragen könnt ihr mir gerne eine E-Mail schreiben oder einen kommentar hinterlassen. 😉
Viel Spaß mit dem Superfish-Menü! 🙂

3 Antworten

  1. Daniel Frei sagt:

    Das Superfish Menu wende ich nun schon seit einiger Zeit in Typo3 an. Da ich nun auch Handy und Tablett fähige Seiten mache gibt es nun aber gerade bei diesen Geräten ein Problem mit der Navigation. Es kann im SF Menu nicht oder nur äußerst mühsam navigiert werden.
    Falls du schon zu einer Lösung gekommen bist dann würde es mich freuen, wenn du mir diese mitteilen würdest.
    Testseite mit SF auf Handy und Tablett: http://www.test.pomona.ch

    Gruß aus der Schweiz
    Dani

  2. Daniel Frei sagt:

    Das Superfish Menu wende ich nun schon seit einiger Zeit in Typo3 an. Da ich nun auch Handy und Tablett fähige Seiten mache gibt es nun aber gerade bei diesen Geräten ein Problem mit der Navigation. Es kann im SF Menu nicht oder nur äußerst mühsam navigiert werden.
    Falls du schon zu einer Lösung gekommen bist dann würde es mich freuen, wenn du mir diese mitteilen würdest.
    Testseite mit SF auf Handy und Tablett: http://www.test.pomona.ch

    Gruß aus der Schweiz
    Dani

Kommentar verfassen