Webdesign, Tutorials und mehr - Webmasterpro.de

CSS-Menü mit jQuery UI und Superfish

Bei der Erstellung aktueller Dropdown-Menüs gibt es einiges zu beachten. Das Wichtigste bei der Erstellung ist es, sicherzustellen, dass das Menü auch bei ausgeschaltetem JavaScript korrekt dargestellt wird und das Layout der Website nicht gesprengt wird.

Ein Problem mit dem man, bei rein in CSS gestalteten Menüs, zu kämpfen hat, ist ein fehlender Delay beim Verlassen des Menü-Baums, was vor allem bei vertikalen Menüs etwas nervig werden kann, wenn der Benutzer über die Kante zu einem weiter unten liegenden Menüpunkt navigieren will.

Superfish

Superfish ist ein unter MIT und GPL Lizenz veröffentlichtes Plugin für jQuery. Es enthält Funktionen zur Gestaltung von bestehenden CSS-Menüs und bietet darüber hinaus weitere nützliche Eigenschaften wie zum Beispiel den angesprochenen Delay.

Beispiele der von Superfish unterstützten Funktionen und Konfigurationsvarianten lassen sich hier auf der offiziellen Website finden.

Superfish ist absolut abwärtskompatibel. Ist JavaScript im entsprechenden Browser nicht aktiviert oder wird nicht unterstützt, bleibt das Menü in seiner Form. Nur die erweiterten Funktionen und Animationen werden natürlich nicht mehr unterstützt.

Die Menüs von Superfish werden normalerweise über ein entsprechendes CSS gesondert gestylt. Eine Unterstützung von jQuery UI ist aktuell nicht implementiert.

jQuery UI

jQuery UI baut auf der jQuery JavaScript Bibliothek auf und dient als Hilfe bei der Erstellung interaktiver Webanwendungen.

In diesem Artikel werden hauptsächlich die unterschiedlichen Themes der Erweiterung genommen um die Menüs besser in die jeweilige Website einzulassen.

Hier soll nur erklärt werden, wie die Optik der Menüs mit Hilfe der jQuery UI Themes angepasst werden können.
Weitere Eingriffe in den Code wie zum Beispiel zur Veränderung der Animation sollen hier dieses mal nicht thematisiert werden.

Die Umgebung

Superfish Beispiel

jQuery Ergebnis

Als Beispiel für diesen Artikel soll ein vertikales Menü erstellt werden. Das Menü wird per class="sf-menu sf-vertical" im <ul>-Tag der Wurzel-Liste initialisiert.

Beim Download von Superfish ist bereits ein Beispiel mit grundlegenden Styles enthalten (siehe Abbildung Superfish Beispiel).

Das Beispiel wird hier auch als Grundlage bei der Anpassung des Aussehens dienen.

Um einen schönen Kontrast bei der Erstellung zu erzielen, wird das neu gestaltete Menü, das Theme Le Frog des jQuery UI bekommen (siehe Abbildung jQuery Ergebnis). Der Vorteil des Arbeitens mit der jQuery UI liegt auf der Hand, zusätzlich zum bereitgestellten Framework lassen sich eine riesige Menge an Themes auf einfachste Weise einbinden und wechseln.

Da keine erweiterten Funktionen der UI verwendet werden, reicht es die CSS-Datei des entsprechenden Themes herunterzuladen.

Die Änderungen

Um die UI mit Superfish zu verbinden, muss an mehreren Ecken etwas geändert werden. Da die Möglichkeit, zwischen den Themes wechseln zu können erhalten bleiben soll, muss das CSS möglichst allgemein verändert werden.

In diesem Artikel werden die CSS-Files so verändert, dass die vertikalen (sf-menu sf-vertical) und basic (sf-menu) Menüs verwendet werden können. Die Veränderungen, um auch die Versionen Bglframe, nav-bar und Supersubs verwendbar zu machen, können analog durchgeführt werden.

CSS

Grundlegende Veränderungen werden in die superfish.css Datei eingepflegt, dabei werden in den meisten Fällen spezifische Styles entfernt um diese durch die entsprechenden jQuery UI Klassen zu ersetzen. Um die Übersicht über den geänderten Code besser behalten zu können, wird, hier im Artikel, der nicht mehr benötigte Code nur auskommentiert.

Im jQuery UI wird der Link Text beim Hover teilweise von bold auf normal geändert. Da sich die Superfish Menüs in der horizontale an der Breite des Inhalts orientieren, führt das zu unangenehmen Verschiebungen. Dies muss durch eine fixe Breite der Einträge unterbunden werden.

1
2
3
4
5

.sf-menu li {
    width:          160px;
    float:          left;
    position:       relative;
}

Die Funktion des Menüs bei ausgeschaltetem JavaScript sind ebenfalls im superfish.css verankert. Dabei ist eine Verschachtelung bis zur 3. Ebene bereits implementiert, alle tieferen Menüs werden dann auf einen Schlag direkt voll angezeigt. Wer eine tiefere Verschachtelung benötigt, kann dies durch schlichtes Copy and Paste der entsprechenden Zeilen (siehe Beispiel noScript-Verschachtelung) und Einfügen zusätzlicher li erreichen. Aus Usability-Gründen sollte aber allgemein auf zu tief verschachtelte Menüs verzichtet werden.

1
2
3
4
5
6
7
8
9

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}

Im Standard Superfish-Menü hat jeder Link einen oberen und linken Rand. Diese werden bei der Verwendung von jQuery UI nichtmehr benötigt.

1
2
3
4
5
6
7
8

.sf-menu a {
    /* jQuery-UI-Modification 
    border-left:    1px solid #fff;
    border-top:     1px solid #CFDEFF;
    */
    padding:        .75em 1em;
    text-decoration:none;
}

Als nächstes müssen die Hintergründe der Menüeinträge entfernt werden.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* jQuery-Ui-Modification
.sf-menu li {
    background:     #BDD2FF;
}
.sf-menu li li {
    background:     #AABDE6;
}
.sf-menu li li li {
    background:     #9AAEDB;
}


.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:     #CFDEFF;
    outline:        0;
}
*/

Zuletzt wird noch der Schatten der Menüs entfernt, dieser kann entsprechend den eigenen Wünschen später wieder eingefügt werden. Eine Möglichkeit wäre zum Beispiel, die mit CSS3 eingeführte Eigenschaft box-shadow, eine Beschreibung wie man diese Möglichkeit einsetzen kann, gab es erst vor kurzem hier auf Webmasterpro.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.sf-shadow ul {
/* jQuery-UI-Modification
    background: url('../images/shadow.png') no-repeat bottom right;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
    */ /* modified */
    padding: 0 8px 9px 0;
}
/* jQuery-UI-Modification
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
*/

Achtung: Das padding im shadow sollte beibehalten werden, sonst gibt es einen unschönen Effekt an der Kante bei der Animation der Menüs.

Damit sind die Veränderungen an der superfish.css abgeschlossen. Um das Menü auch vertikal verwenden zu können, müssen noch kleine Änderungen an der superfish-vertical.css durchgeführt werden.

jQuery-UI verhält sich bei der Breite der Menüeinträge etwas anders wie Superfish. Deshalb ist es besser die Breite auf Pixel umzuschreiben. Damit sich die beiden Ränder der Einträge nicht überlappen muss das Untermenü um einen Pixel nach rechts verschoben werden.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
    width:  160px; /* jQuery-UI-Modification */
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
    left:   161px; /* match ul width */ /* jQuery-UI-Modification */
    top:    0;
}

HTML

Im HTML des jeweiligen Menüs muss, abhängig von der jeweiligen Variante des Menüs nur wenig geändert werden.

Da im CSS die Veränderung der Buttons beim hover zugunsten des jQuery UI entfernt wurde, muss dies nun per JavaScript nachgeholt werden.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$(document).ready(function() {
    $('li').hover(
        function() {
            $(this).addClass('ui-state-hover');
        },
        function() {
            $(this).removeClass('ui-state-hover');
        }
    );
});

Zusätzlich müssen wir den Menüs noch die entsprechenden jQuery UI Grundklassen verpassen. Die Einstellungen hier hängen ganz vom persönlichen Geschmack ab. Im Beispiel-Menü haben wir jedem li die gleichen Klassen verpasst.

1

<li class="ui-widget-header ui-corner-all"><a href="#">menu item</a>

Javascript

Als letztes müssen noch kleine Änderungen in der superfish.js vorgenommen werden.

Die Änderungen zielen darauf ab, alle im aktuellen Menü-Pfad aktiven Einträge mit dem hover-Effekt der jQuery UI zu versehen. Dazu wird eine neue variable uiClass eingeführt.

1
2
3
4
5
6
7

sf.defaults = {
    hoverClass  : 'sfHover',
    uiClass     : 'ui-state-hover',  // jQuery-UI modified
    pathClass   : 'overideThisToUse',
    pathLevels  : 1,
    ...
}

Die Klasse wird dann jeweils in der hideSuperfishUL und showSuperfishUL eingesetzt, wo auch das von Superfish verwendete hoverClass eingesetzt wird.

1
2
3

var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not)
        .removeClass([o.hoverClass,o.uiClass].join(' '))
        .find('>ul').hide().css('visibility','hidden'); // jQuery UI modified

1
2

$ul = this.addClass([o.hoverClass, o.uiClass].join(' '))
    .find('>ul:hidden').css('visibility','visible'); // jQuery UI modified

Damit ist das Menü fertig, und kann mit beliebigen Themes aus der jQuery UI gefüttert werden.

Beispiele

Mit dem Menü lassen sich sehr einfach tiefe Verschachtelungen erstellen. Wie bereits gesagt ist das nur als Beispiel zu sehen. Aus Usability-Gründen sollte ein Menü nicht zu tief verschachtelt sein.

Tiefe Verschachtelung mit jQuery UI le-frog-Theme

Das Menü lässt sich einfach durch Weglassen der Klasse sf-vertical in der Wurzelliste zu einem horizontalen Menü umbauen.

Horizontales Menü mit jQuery UI eggplant-Theme

Außerdem lassen sich die Themes durch ein einfaches Ändern des Theme CSS-Pfades verändern.

jQuery Ui start-Theme

jQuery UI smoothness-Theme

jQuery UI sunny-Theme

jQuery UI ui-darkness-Theme

Kommentare: CSS-Menü mit jQuery UI und Superfish