jQuery-Plugin Color Animations – Menüs mit wechselnden Farben animieren

Kein Beitragsbild

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Roll-over-Effekte für Menüs haben eine lange Tradition und bieten gute Möglichkeiten, die Navigation interessanter und übersichtlicher zu gestalten. Sicher haben Sie schon Menüs gesehen, deren Text oder Hintergrundfarbe sich bei Mouseover ändert und beim Verlassen der Maus langsam wieder verblasst, so dass eine Art von Slide-Show- oder Animations-Effekt entsteht. Solche Menüs wurden meist mit Flash realisiert. Da im Zuge der Barrierefreiheit zunehmend auf Flash verzichtet wird, sehe ich diese Animationen bei Menüs in letzter Zeit immer weniger. Im Fall der in Flash umgesetzten Varianten ist dies für mich kein großer Verlust, da ich Flash hier für falsch eingesetzt ansehe. Dieser Effekt lässt sich nämlich sehr einfach mit jQuery und dem Color Animations Plugin realisieren.


Ein Klick aufs Bild öffnet eine Seite mit Demos.

Das Color Animations Plugin

Die .animate() Methode von jQuery ist eine tolle Sache die viele Möglichkeiten bietet, nur leider gehört die Animation von Farben standardmäßig nicht dazu, doch durch das Einbinden des Color Animations plugin von John Resig ist auch das möglich.

Alternativ kann auch jQuery UI Effects eingebunden werden, um Farben zu animieren. Wenn also schon jQuery UI Effects eingebunden sind, kann auf das Color Animations Plugin verzichtet werden.

Vorüberlegungen

Das Menü soll:

  • Farben animieren können, Schrift- und/ oder Hintergrundfarben
  • Ohne Java Script funktionsfähig bleiben
    • Realisiert durch ein CSS Fallback
  • Auch per Tastatur bedient werden können und funktionieren
    • Realisiert durch focus events
  • Die Aktuelle Seite auf „active“ setzen und nicht animieren

Um die Animation auch per Tastaturbedienung zu ermöglichen, verwende ich hier die focus Evente .focusin() und .focusout(). Diese Funktionen stehen in jQuery ab der Version 1.4 zur Verfügung, daher ist die Mindestanforderung auch jQuery 1.4.

HTML und CSS

Die Demo präsentiert vertikale und horizontale Menüs in verschiedenen Ausführungen –  mit aktivem Element und ohne, mit und ohne Hintergrund. Bei der Variante ohne Hintergrund wechselt die Textfarbe.


Menü mit Hintergrund

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

Grundstruktur

Das Menü besteht aus einer unsortierten Liste und einfachen Textlinks, die aktive Seite wird durch die Klasse „active“ hervorgehoben und von der Animation ausgeschlossen.
Durch die Klasse „jMenue“ greifen wir in jQuery auf die Links zu, die Klasse „jMenueNoJs“ dient dem CSS Fallback und die Klasse „horizontalMenue“ wird im Beispiel benötigt, da vertikale und horizontale Menüs auf einer Seite dargestellt werden.

CSS

Die Komplette CSS-Datei möchte ich hier nicht erläutern, das würde sicher die meisten langweilen, deshalb beschränke ich mich auf die, meiner Meinung nach, wichtigsten Stellen und Eigenschaften.

.jMenue{
cursor: pointer;
list-style-type: none;
padding:0;
}

Je nach dem wie das Menü gestylt wird, können Leerräume zwischen den einzelnen Links entstehen. Wenn der Mauszeiger nun in diesem Leerraum ist, wird natürlich nicht die linktypische Hand angezeigt. Dies kann zu einem „Flackern“ des Mauszeigers führen, deshalb weisen wir dem Mauszeiger im kompletten Menübereich die linktypische Hand zu.
<

>
.jMenue .active{
color: #000;
}

Dem aktiven Menüpunkt, sofern er vorhanden ist, wir die Farbe zugewiesen, zu der bei Mouseover gewechselt wird, hier Schwarz (#000).

.jMenue :focus{
outline: none;
}

Da wir den Focus-Zustand eines Links explizit visuell erkennbar machen, können wir auf den standardmäßigen Rahmen verzichten.

.jMenueNoJs a:hover,
.jMenueNoJs a:focus{
color:#000;
}

Wenn Java Script nicht aktiviert ist, wird die Linkfarbe bei Hover und Focus per CSS gewechselt. Diese Klassen werden mittels jQuery entfernt, dazu aber später mehr.

Der jQuery Part

$('ul').removeClass('jMenueBGNoJs .jMenueNoJs');

Diese Zeile ist der CSS Fallback, funktioniert ganz einfach: Wenn JavaScript aktiviert ist, werden die CSS-Klassen .jMenueBGNoJs und .jMenueNoJs mit der .removeClass() Methode entfernt. Wenn nicht, bleiben die Klassen bestehen und sorgen für den Farbwechsel.

Textfarbe animieren

$(".jMenue a").not(".active, .jMenueBG a").each(function(){
$(this).bind({
mouseenter: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
mouseleave: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});
$(".jMenue a").not(".active, .jMenueBG a").each(function(){

Alle Links der Klasse ,jMenue werden selektiert. Mit der .not() Methode werden die Klasse .active und die Links der Klasse . jMenueBG von dieser Selektion ausgeschlossen.
Die Links der Klasse .jMenueBG müssen hier nur ausgeschlossen werden, wenn wie in der Demo Menüs mit Text und Hintergrundanimation auf einer Seite eingebunden sind.
Mit der .each()-Methode werden nun für jedes Element der Selektion nacheinander die Anweisungen in der geschweiften Klammer ausgeführt.

$(this).bind({


Menü ohne Hintergrund – hier wird die Farben der Textlinks gewechselt.

Auf das jeweilige Element wird mit $(this) zugegriffen. Da wir die jQuery-Version 1.4 verwenden, können wir mit der .bind() Methode mehrere Eventhandler an ein Element binden. Die folgenden Events werden nun, durch ein Komma getrennt, an das jeweilige Element gebunden.
mouseenter: function(){
Dieser Event wird ausgelöst sobald sich der Mauszeiger über einem Link befindet.

$(this).stop().animate({ color: '#000' }, 'fast');
},

Wir greifen wieder mit $(this) auf das jeweilige Element zu. Falls noch eine Animation für dieses Element läuft wird diese mit der .stop() Methode angehalten. Anschließend wird die aktuelle Farbe des Linktextes zu schwarz (#000) animiert. Als Dauer für die Animation wird hier „fast“ verwendet, was einer Zeit von 200 Millisekunden entspricht.
mouseleave: function(){
Dieser Event wird ausgelöst sobald der Mauszeiger den Link verlässt.

$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},

Hier wird durch die Angabe von “true” als zweiter Parameter der .stop() Methode eine eventuell noch laufende Animation sofort auf den Endzustand der Animation gesetzt. Dadurch wird sichergestellt dass die Animation von Schwarz nach Blau statt findet und nicht von einem Grau nach Blau. Als Dauer für die Animation wird hier „slow“ verwendet, was einer Zeit von 600 Millisekunden entspricht.

focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});

Dasselbe wird auch für die Events “focusin” und “focusout” ausgefürt, um den Effekt eben auch per Tastatur zu ermöglichen.

Hintergrundfarbe animieren

Der Code zum Animieren der Hintergrundfarbe unterscheidet sich nur wenig, deshalb gehe ich hier nur auf die kleinen Unterschiede ein.

$(".jMenueBG a").not(".active").each(function(){

Da wir hier die Klasse .jMenueBG verwenden, müssen wir auch nur die Klasse .active() von der Animation ausschließen.

>$(this).bind({
mouseenter: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},

Anstatt “color” wird hier “backgroundColor” animiert. Hier müssen Sie auf die Schreibweise achten: “background-color” funktioniert nicht.

mouseleave: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
}
})
});

Active Link

Das Menü ohne aktiven Link zu verwenden ist recht simpel, dafür wird einfach die Klasse .active nicht gesetzt. Wenn diese nicht existiert, kann sie natürlich auch aus der .not()-Methode entfernt werden – oder Sie verzichten komplett auf diese Methode.

Fazit

Die verwendeten Farben und Animationsgeschwindigkeiten sind natürlich Geschmackssache – sie dienen nur als Beispiel. Farbe und Geschwindigkeit können Sie ganz einfach an die eigenen Bedürfnissen anpassen. Ebenso können Sie nicht nur Links animieren, sondern die vorgestellten Funktionen auf DIV-Container oder Tabellen anwenden. Der Kreativität sind kaum Grenzen gesetzt.

(mm),

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Sortiert nach:   neueste | älteste | beste Bewertung
hanspeter
Gast

Das geht doch mit CSS3 bzw. -webkit-transitions viiiiel einfacher und entsprechend ohne JavaScript … schaut euch mal mit einem WebKit-Browser (also z.B. Safari oder Chrome) die Hauptnavigation von z.B. http://www.macprime.ch an, die setzen diese “CSS-Animation” dort sehr ansprechend ein.

annonühm
Gast

@hanspeter: Ist ja schön, aber es bringt in der Praxis wenig, wenn nur etwa 10% aller Benutzer den gewünschten Effekt sehen können. Mit jQuery dürften alle wichtigen Browser abgedeckt werden. Über andere Methoden können wir uns in vielleicht 2 Jahren nochmal unterhalten.

Manu
Gast

“meistens mit Flash” ist im seriösen Webdesign nicht korrekt in diesem Zusammenhang. Schon seit längerer Zeit nutzen Webentwickler aus verschiedenen Gründen javascript & CSS3.

Neben der Darstellbarkeit in allen Browsern verringert es auch erheblich die Ladezeit gegenüber Flash und belastet aufgrund seiner enorm kleinen Dateigrösse kaum.

Oliver
Gast

Danke für diesen netten Artikel.

ThomasO
Gast

Sehr schöner Artikel.
Solch ein kleiner netter Effekt fehlt mir auf meiner privaten Webseite noch.
Ich denke ich werde es mal einbauen.

Daniel
Gast

hm, ich glaube mit solchen animationen kommt man ganz leicht von “oh-ha!” nach “oh-oh…” wenn mans uebertreibt. bei den demos musste ich spontan an diese roten “knight-rider scanner” gifs denken die mitte der 90er gerne als texttrenner missbraucht wurden. :D
ist der -webkit-transitions effekt css3 standard und haelt irgendwann auch die restlichen browser einzug, oder ist dieser effekt ein webkit-only feature?

Ursula
Gast

Ist zwar schon ein älterer Artikel aber vielleicht hilft jemanden meine Antwort. Das Iframe-Plugin ist nicht mehr notwendig seit es CSS3 Transition gibt. Habe dazu einen tollen Artikel gefunden: http://www.solife.cc/blog/animation-farben-css3-transition.html

Kann nun alles in 2 Zeilen CSS abgewickelt werden.. super! :-)

wpDiscuz