pimp my Navi with jQuery: Navigations-Menü mit Hover-Effekt
Dienstag, 22 Juni 2010 1 Kommentar
Manchmal sind es die kleinen Effekte, die einer Webseite den letzten Schliff geben. Heute schnappen wir uns eine vertikale Text-Navigation und jQuery's Hover-Funktion und bringen etwas Leben in die Navispalte.
Das HTML für diese Beispiel ist schnell erzeugt. Eine Liste(ul), einige Links in den Listenelementen, dann noch etwas CSS zum Formatieren. Der Liste geben wir eine Breite von 200px, den Listenelementen nehmen wir das Listensymbol weg und setzen es auf display:block. Die einzelnen Links erhalten etwas Innenabstand (padding) und ebenfalls die Eigenschaft display:block.
<!-- das CSS //-->
<style type="text/css">
#navi{width:200px;font:12px tahoma,sans-serif;}
#navi li{list-style:none;margin:0;display:block;}
#navi li a{
display:block;
padding:7px 7px 7px 14px;
border-left:4px #ddd solid;
background:#e5e5e5;font-size:110%;
color:#666;text-decoration:none;}
#navi li a:hover {color:#222;background:#d5d5d5;border-left-color:#ccc;}
</style>
<!-- das HTML //-->
<ul id="navi">
<li><a href="#">Link Nummer 1</a></li>
<li><a href="#">Link Nummer 2</a></li>
<li><a href="#">Link Nummer 3</a></li>
<li><a href="#">Link Nummer 4</a></li>
<li><a href="#">Link Nummer 5</a></li>
<li><a href="#">Link Nummer 6</a></li>
</ul>
Folgt nun das Kernstück, unser jQuery-Code. Die schon angekündigte Funktion hover() erwartet 2 Handler, eine Funktion, die ausgeführt wird, wenn die Mouse auf das Element zeigt, und eine Funktion, die ausgeführt wird, wenn die Maus das Element verlässt. Wir überwachen alle Links der Listenelemente die in der Liste mit der ID navi stecken, also #navi > li a. Der Hover-Effekt wird ein langsame Bewegung nach links sein, das realisieren wir mit animate(), als Ausführunszeit gebe ich eine halbe Sekunde (500 Millsekunden) an. Der 2. Handler, das Zurück, wird ebenfalls mit animate() realisiert, diesmal etwas schneller, 400 Millisekunden. 2 Dinge sind wichig. Bevor das erste animate() bei Hover ausgeführt wird setzen wir die Funktion stop(). Das bewirkt, das eventuell gerade ausgeführte Animationen gestoppt werden, so kommt es nicht zu ungewollten Bewegungen. Das paddingleft des zweiten Handlers lässt den Link in den Ausgangszustand zurück wandern (das padding-left 14px, welches im CSS steht).
<script type="text/javascript">
$(function () {
$("#navi > li a").hover(
// wenn die Maus sich über einen Link bewegt
function () {
// der aktuelle berührte Link wird animiert, eine Bewegung nach links in 500 Millisekunden
$(this).stop().animate({
paddingLeft : '25px'
}, 500);
},
// wenn die Maus den Link verlässt
function () {
// zurück zum Originalwert padding-left 14px in 400 Millisekunden
$(this).animate({
paddingLeft : '14px'
}, 400);
}
);
});
</script>
Und hier nun ein kleines Livebeispiel:
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hallo Berthold, nach einiger Zeit des Suchens und des Herumexperimentierens, stelle ich fest, dass Dein kurzer knackiger Code zur Animation eines Menüs besser geht, als alle anderen - teils überfrachteten - Varianten, die man so im Netzt findet. Unter jQuery 1.4 habe ich allerdings festgestellt dass Firefox bei Inhalts-starken Seiten erst beim 2. Berühren mit der Mouse animiert. Bei der ersten Mouse-Berührung nimmt er die normale CSS ohne Animation. Ich habe daher Dein Script leicht geändert um eine gewisse Vorspannung zu erzeugen: $("ul > li a").css('padding', '5px 15px') .hover(function() { $(this).stop().animate({paddingLeft : '40px'}, 400); }, function() { $(this).animate({paddingLeft : '15px'}, 500); }); Grüße a. d. Harz Werner