unForastero

<Webworking>


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:





diese Seite teilen:




Kommentare

es gibt insgesamt 1 Kommentar(e)












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz