Animation der oberen Navigation
Hier haben wir nun mit wenigen Handgriffen die obere Navigation ein wenig animiert. Dazu habe ich das Animated Hover Plugin for jQuery eingesetzt.
So
soll es aussehen, in IE und Opera leider ohne runde Ecken, der
Rahmen folgt der Maus so lange sie sich über der Navigation
bewegt.
Ein netter kleiner Effekt. An Javascript wird nur jQuery und das Plugin benötigt:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ahover.js"></script>
Im Head oder in einem externen Javascript wird das Plugin angestoßen:
jQuery(function($) {
// Animation der oberen Navigation
$('#nav ul li').ahover({toggleEffect: 'height', moveSpeed: 300, toggleSpeed: 150});
});
Die Parameter sind eigentlich selbsterklärend, als toggleEffect ist width oder height möglich. Ein Aufruf ohne Parameter ist ebenso möglich .ahover(); reicht aus. Das DimensionPlugin ist nicht mehr notwendig, seit jQuery Version 1.2.6 ist dies im Core übernommen worden.
Nun noch in der CSS die Angaben für den gewünschten Effekt ergänzen. Hier hab ich nur einen Border mit runden Ecken verwendet, es sollte aber jede Angabe möglich sein. Solange man keinen Hintergrund verändert sollten auch keine weiteren Angaben zum z-index notwendig sein. Der z-index bei den Links ist nötig um diese erreichbar zu halten. Alle zu animierenden Eigenschaften werden dem DIV mit der Klasse ahover zugeschrieben.
/* Animation der oberen Navigation */
#nav ul{
position:relative;
}
#nav ul div.ahover{
border:1px solid #b9b9b9;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
position:absolute;
z-index:100;
}
#nav ul li a{
position:relative;
z-index:101;
}
/* ENDE - Animation der oberen Navigation */
InternetExplorer und Opera zeigen den Effekt ohne die runden Ecken an, ansonsten sollte aber alles klappen.
Kommentare, Fragen, Anregungen bitte im Blogbeitrag oder per Mail