Animiertes Thumbnail-Menü mit jQuery
0

Animiertes Thumbnail-Menü mit jQuery

 18. November 2009, 20:22 Uhr jQuery

In diesem Artikel werd ich euch zeigen, wie man mit ein wenig jQuery ein animiertes Thumbnail-Menü erstellt. Das Ergebnis wird anschließend wie folgt aussehen:

Animiertes Menü mit jQuery

Wir fangen mit der HTML-Struktur unseres Menüs an. Es besteht ausschließlich aus zwei Div-Containern, sowie den Links, die jeweils das entsprechende Thumbnail enthalten.

<div id="container">
<div id="menu">
          <a class="menuitem"><img src="image1.png" alt="" /></a>
          <a class="menuitem"><img src="image2.png" alt="" /></a>
          <a class="menuitem"><img src="image3.png" alt="" /></a>
          <a class="menuitem"><img src="image4.png" alt="" /></a>
     </div>
</div>

Mit folgendem CSS wird das ganze in die richtige Form gebracht.

#container { position: relative; height: 130px; }
#menu { position: absolute; bottom: 0px; text-align: center; width: 500px;  }
#menu a img { border: 0px; margin: 0px; }
#menu .menuitem { position: fixed relative; bottom: 0px; display: inline-block; }
#menu img { -ms-interpolation-mode: bicubic; }

Zu beachten ist ist dabei, dass der Container die Höhe der Bilder haben sollte ( height: 130px; ), und außerdem position: relative haben sollte, um das Menü am Fuß des Containers ausrichten zu können ( bottom: 0px; ). Die letzte Zeile sorgt mit -ms-interpolation-mode: bicubic; für eine gescheite Darstellung im IE.

Nun zur jQuery Magie. Mit folgendem Code setzen wir nach der Definition der wichtigen Variablen alle Bilder auf die kleine Thumbnail-Größe, und setzen die entsprechenden Befehle für MouseOver und MouseOut.

jQuery(document).ready(function(){
 
   var imageWidth = 130; // Breite für großen Thumbail
   var thumbWidth = 80;  // Breite für kleinen Thumbail
   var speed = 150;      // Animations-Geschwindigkeit
 
   // Bilder auf Thumbnail-Größe setzen
    jQuery('#menu .menuitem img').animate({width: thumbWidth}, 0);
 
    jQuery('#menu .menuitem').mouseover(function(){
         // MouseOver - Thumbanil vergrößern
         thumbnail = jQuery(this).find('img');
         thumbnail.stop().animate({width: imageWidth}, speed);
      }).mouseout(function() {
         // MouseOver - Thumbanil verkleinern
         thumbnail.stop().animate({width: thumbWidth}, speed);
      });
});

Dabei ist der Aufruf der Methode stop() sehr wichtig, da sonst nach einem verfrühten MouseOut die Animation erst zu Ende läuft, bevor die nächste gestartet wird. Besonders bei einer langsamen Animation bewirkt dies einen schwammigen Effekt… und das will keiner :)

Und fertig ist unser animiertes Thumbnail-Menü. Wieder einmal ein gutes Beispiel für die Einfachheit von jQuery.

Tags: , , ,

Kommentar schreiben