Noch nicht sehr lange im Einsatz, aber trotzdem schon des öfteren nachgefragt: wie funktioniert die kleine Animation beim “MousOver” über die oben ersichtlichen Menü- Punkte.
Es ist leichter als vermutet, eine kleine Spielerei mit CSS- Eigenschaften, gesteuert vom JavaScript- Framework jQuery.
Doch mal ganz von Vorne: für jQuery- Anwendungen benötigt man nat. jQuery ;-)
Diese läßt sich bequem über die Googleapis einbinden oder nach Download auf der jQuery- Site auf dem eigenen Webspace hosten inkl. passender Einbindung.
Ersteres:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>Zweiteres sollte keiner Erklärung bedürfen…
Unser Menü ist, wie es sich gehört, als “Unordered List” – als <ul>eingebunden:
<ul id="menue">
<li><a href="kundenliste.html">Referenzen</a></li>
<li><a href="weblog">Weblog</a></li>
...
</ul>
Mit diversen CSS- Anweisungen wurde die Liste quergelegt und in der Optik an unsere Vorstellungen angepasst. Dies soll jetzt nicht Inhalt dieses Post sein, es geht alleine um die Animation.
Und diese ist schnell niedergeschrieben:
Nach dem obligatorischen
$(document).ready(function(){
(dies am Ende wieder schließen nicht vergessen ;-)) schreiben wir:
$('ul#menue li a').hover(function(){
$(this).stop().animate({paddingTop: '40px', paddingBottom : '10px'}, 100);
}, function(){
$(this).stop().animate({paddingTop: '50px', paddingBottom : '0'}, 500);
});
Zur Erklärung:$('ul#menue li a').hover(function(){Hier wählen wir das richtige Element (ein Link in einem Listenelement in der Liste mit der ID “menue”) und legen fest, das das folgende bei “Hover”, also bei Berührung mit der Maus passieren soll.
$(this).stop().animate({paddingTop: '40px', paddingBottom : '10px'}, 100);Und hier der Reihe nach:
“this” sagt “mach das Folgende mit dem gerade gewählten Element”,
“stop” beendet eventuell in einer Schleife geratene Animationen,
“animate” erzeugt einen fließenden Übergang zu den in der Klammer definierten CSS- Werten,
“paddingTop” und “paddingBottom” erklärt sich von selber und die abschließende Zahl gibt die Geschwindigkeit der Animation an.
Kurz gesagt: ändere innerhalb von 100 Millisekunden den Abstand oben und unten – der verlinkte Text bewegt sich.
Die letzte Zeile dreht die ganze Animation wieder um, d.h. wenn ich mit der Maus den Link verlasse werden innerhalb von 500 Millisekunden die Abstände oben und unten wieder zu den Ursprungswerten geändert.
Eine sehr einfache Sache, schnell geschrieben und bei deaktiviertem JavaScript seitens des Besuchers passiert nichts und die Navigation ist trotzdem funktionstüchtig.
