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.

Nun stieß ich auf der Suche nach Tutorials auf folgendes Video von Chief Web Developer Ben Nadel.  In diesem Video gibt er in Form einer Präsentation einen intensiven Einblick in jQuery und all seine Komponenten. Zwar geht er nur kurz auf die einzelnen Bestandteile ein, zeigt jedoch anhand kleiner Beispiele den Zweck und die Funktion und schafft es damit ca. 100 Minuten Videomaterial zu füllen. Sehr empfehlenswert für jQuery Begeisterte und diejenigen, die es werden wollen.

Zum Video “An Intensive Exploration Of jQuery With Ben Nadel”