 Super Duper Hover Navi mit Mootools
Mit Mootools lassen sich Überblendeffekte realisieren, welche die abrupten CSS-Hover-Effekte bei weitem übertreffen. Hier wird an einem Beispiel gezeigt, wie ein weicher Überblendeffekt mit Mootools programmiert wird.
So soll die Navi aus unserem Beispiel dann aussehen:
Der Vorteil
Der Vorteil von solchen Javascript-Effekten gegenüber Flash liegt klar auf der Hand: Im Quelltext ist im Gegensatz zu Flash der Text der einzelnen Navipunkte vorhanden, was für Suchmaschinen allgemein ziemlich gut ist. Wie geht's?Zuerst erstellen wir uns die Navigation in HTML. Wir verwenden hier exemplarisch eine unordered List, wie sie in den meisten Navigationen zum Einsatz kommt: HTML
<ul id="navi">
<li class="punkt">Punkt1</li>
<li class="punkt">Punkt2</li>
<li class="punkt">Punkt3</li>
</ul>
Wichtig ist hier schon einmal (für den späteren Gebrauch), dass das ul-Element eine id erhält. CSS
Als Nächstes definieren wir das CSS für die einzelnen Navipunkte:
.punkt { background:#FFD71F; color:#FFFFFF; cursor:pointer; display:block; float:left; margin-left:1px; padding:10px; }
Javascript
Jetzt kommt Mootools zum Einsatz. Übrigens: Man spricht das nicht Mowtohls sondern Muh tuhls. Unser Skript regelt im Prinzip die Mouse-Events für Mouseover und Mouseout. Dann dann soll sich ja die Hintergrundfarbe des einzelnen Navipunktes verändern. So schaut das aus:
// Alles muss geladen sein
window.addEvent('domready', function() {
// Die li-Elemente in einem Array speichern
var array_punkte = $('navi').getChildren();
// Das Array durchlaufen
$each(array_punkte, function(punkt) {
// Effekt definieren
var myFx = new Fx.Tween(punkt, {duration:'long'});
// Mouseover-Event für den Punkt
punkt.addEvent('mouseover', function() {
// Wenn der Mouseout-Effekt noch nicht zu Ende ist: abbrechen
if(!myFx.complete())
{
myFx.cancel();
}
myFx.start('background-color', '#6F88FF');
// Mouseout-Event für den Punkt
punkt.addEvent('mouseout', function() {
// Wenn der Mouseover-Effekt noch nicht zu Ende ist: abbrechen
if(!myFx.complete())
{
myFx.cancel();
}
myFx.start('background-color', '#FFD71F');
});
});
});
});
Zuerst prüfen wir, ob die gesamte DOM-Struktur bereits geladen ist (Zeile 2). Das sollte man standardmäßig immer so machen, wenn man vorhat, einzelne Elemente im DOM anzusprechen. Die müssen dann ja auch verfügbar sein, sonst gibt es eine unschöne Fehlermeldung. Als Nächstes holen wir uns in Zeile 5 alle Kind-Elemente unseres ul-Elements. Hierfür benötigen wir die id 'navi', die wir ja in weiser Vorraussicht bereits zu Beginn definiert haben. Alle Kind-Elemente werden in einem Array gespeichert. Nun durchlaufen wir dieses Array in Zeile 8 mit der Mootools-Funktion $each. Der Überblend-Effekt wird in Zeile 11 definiert und als Option die duration long übergeben. Das ist der Zeitraum, über den sich der Effekt erstreckt. Der Event-Handler für Mouseover für jeden einzelnen Punkt wird in Zeile 14 definiert. Hier soll sich dann die Farbe mit dem Effekt ändern. Der Event-Handler für Mouseout für jeden einzelnen Punkt wird in Zeile 23 definiert. Hier soll sich die Farbe dann wieder auf den ursprünglichen Wert per Effekt ändern. Wenn nun der User zu schnell mit seiner Maus aus einem Punkt herausfährt und dann gleich wieder hinein und der erste Überblend-Effekt noch nicht beendet ist, wird von Mootools versucht den zweiten zu starten, was aber nicht geht, denn der erste ist ja noch nicht fertig. Das Resultat daraus ist, dass auf einmal kein Effekt mehr funktioniert und einfach gar nichts mehr passiert. Deshalb müssen wir den Mouseout-Effekt abbrechen, sobald der Mouseover-Effekt wieder gestartet werden soll. Das machen wir in den Zeilen 16 - 19. Das Gleiche muss auch für den Fall gemacht werden, dass der Mouseout-Effekt gestartet werden soll, wenn der Mouseover-Effekt noch nicht beendet ist. Dies passiert in den Zeilen 26 - 29.
|
Kommentare
Safari und Firefox zeigen das dann bereits wie gewünscht an, in anderen — blöderen ;-) — Browsern ist es noch abrupt.