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

As a good and stable dropdown menu I’m using the Superfish jQuery menu plugin by Joel Birch. Superfish is an enhanced Suckerfish-style menu jQuery plugin that is quite easy to customize. With a lot of options it can be tailored to your needs. But thanks to our friend IE you might experience the z-index bug. The fix is very simple!

The IE z-index issue:

I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this

<div id='header'>
    <div id='nav' class='sf-menu'>Here the menu</div>
</div>
<div id='content'>Here the content</div>

Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.

The fix is so simpel:

After a bit of research I came accross the IE z-index Bug on Klog – php, linux, ajax, javascript. On this page Kae Verens describes the bug and gives an example. But the solution was some kind of unsatisfactory for me. But one of the commenters – Michael – posted a very simple solution.

You do not have to set the z-index on the menu or its children but on the two position:relative elements header and content (in my example). So I set:

#header {
    z-index:2;
}
#content {
    z-index:1;
}

and the problem was fixed! Thanks to Michael. This is basic CSS knowledge, but once you dived into the menu’s css it is hard to see

Relevant Links:

• Superfish – Suckerfish on ‘roids
• Download – Superfish
• Support – jQuery Mailing List
• Tutorial: jQuery Dropdown Menü mit Superfish (German)