Emanuel Kluge

Animierte Navigation mit jQuery

Dies ist eine Reiter-Navigation, bei der der aktive Reiter am Inhaltsbereich andockt und die inaktiven Reiter darüber schweben. Sozusagen ein Wink mit dem Zaunpfahl für den User. Damit die Benutzung noch ein bißchen geschmeidiger ist, docken die inaktiven Reiter am Inhaltsbereich an, wenn man mit dem Cursor über sie fährt. Für den Effekt nutze ich das JavaScript-Framework jQuery.

Als erstes wie gewohnt der HTML-Teil:

HTML
<ul>
   <li class="active"><a href="index.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

Eine schlichte, ungeordnete Liste. Wichtig ist jedoch, dass der aktive Reiter die Klasse active bekommt.

Als nächstes der CSS-Teil:

CSS
ul {
	width: 800px;
	height: 51px;
	padding: 0 0 0 10px;
	clear: left;
	list-style: none;
	background: url('pixel.gif') left bottom repeat-x;
}

li {
	width: auto;
	_width: 97px;
	height: 40px;
	float: left;
	display: inline;
	margin-right: 10px;
	text-align: center;
}

a {
	display: block;
	width: auto;
	height: 38px;
	padding: 0 10px;
	margin-bottom: 0;
	line-height: 38px;
	border: 1px solid #333;
	text-decoration: none;
}

a:link,
a:visited {
	color: #333;
	background-color: #EEE;
}

a:hover {
	color: #333;
	background-color: #FFF;
}

a:active {
	color: #666;
	background-color: #FFF;
}

.active a:link,
.active a:visited {
	margin-top: 11px;
	border-bottom-color: #FFF;
	background-color: #FFF;
}

.active a:hover{
	color: #666;
}

.active a:active {
	color: #999;
}

Da der Internet Explorer Höhen- und Breitenangaben flexibel handhabt, können wir das a-Element nicht einfach mit dem entsprechenden margin-Wert über das ul-Element hinaus schieben. Deshalb habe ich den unteren Rand des ul-Elements nicht mit einer CSS-border, sondern mit einer ein Pixel großen Grafik realisiert.

Des weiter befindet sich beim Teil für das li-Element die Angabe "_width: 97px". Das ist für den IE6, da dieser das li-Element bei der Angabe "width: auto" über die komplette Breite des Inhaltsbereich zieht.

Als nächstes kommen wir zum JavaScript-Teil:

JavaScript
if ( navigator.appName != 'Microsoft Internet Explorer' ) {
   $(document).ready(function() {
      $('li').filter('[class=]').hover(function() {
         $('a', this).animate({ marginTop: '11px', color: '#CFF' }, 200).animate({ borderBottom: '1px solid #FFF' }, 1);
      }, function() {
         $('a', this).animate({ borderBottom: '1px solid #333' }, 1).animate({ marginTop: '0', color: '#EEE' }, 200);
      });
   });
}

Direkt am Anfang kommt eine Abfrage, ob es sich beim Browser des Nutzers um den Internet Explorer handelt. Dieser spuckt beim vorliegenden JavaScript-Code einen Script Error aus, was meinen Recherchen zufolge an der jQuery-Funktion animate() liegt. Leider konnte ich keine Lösung des Fehlers finden, weshalb die Navigation im Internet Explorer ohne jQuery mit reinem CSS auskommen muss.

Ansonsten ist der jQuery-Code-Schnippel schnell erklärt. Fährt man mit dem Cursor über ein in nichtaktives li-Element, wird das darin liegende a-Element animiert, fährt runter und bekommt einen weißen unteren Rand. Beim Verlassen des li-Elements mit dem Cursor, wiederholt sich das Spiel in umgekehrter Reigenfolge.

Zum Schluss bauen wir noch die entsprechenden Style-Angaben ein, um die Navigation für den Internet Explorer und Browser mit deaktiviertem JavaScript fit zu machen:

HTML/CSS
<!--[if IE]>
   <style type="text/css">
      a:hover {
         margin-top: 11px;
         border-bottom: 1px solid #FFF;
      }
   </style>
<![endif]-->
<noscript>
   <style type="text/css">
      a:hover {
         margin-top: 11px;
         border-bottom: 1px solid #FFF;
      }
   </style>
</noscript>

Fertig ist die animierte Navigation mit jQuery. Oben findet ihr den Link zu den Dateien. Bei Fragen oder Anregungen freue ich mich wie immer über einen Kommentar.

Bilder mit jQuery einblenden, wenn sie fertig geladen sind

Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber dennoch recht nützlich. Schließlich sieht es einfach eleganter aus, wenn die Bilder eingeblendet werden, wenn sie fertig geladen sind. Außerdem sehen die Besucher nicht den alternativen Text des Bildes, sondern das kleine, sich drehende Rädchen, bei dem heutzutage (fast) jeder weiß, dass gerade etwas in Arbeit ist.

Los geht es mit dem HTML-Teil:

HTML
<div class="wrap">
   <h1>Bilder einblenden mit jQuery</h1>
   <div class="image_frame">
      <a href="http://www.flickr.com/photos/herschel_r/3226358452/">
         <img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
      </a>
   </div>
</div>

Der Übersichtlichkeit halber habe ich hier nur ein Bild eingebunden, und nicht sechs, wie in der Demo. Man kann allerdings so viele Bilder einbinden, wie man möchte. Der Aufbau ist ziemlich simpel: Ein <div>-Tag zum Aufspannen des Inhaltsbereiches und jeweils eins pro Bild.

Kommen wir nun zum jQuery-Teil:

Javascript
var loader = "<img src=\"load.gif\" class=\"load\" alt=\"Lädt…\" />";
$(document).ready(function() {
   $('.image').hide();
   $('.image_frame').append(loader);
   $(window).load( function() {
      $('.load').hide();
      $('.image').fadeIn('slow');
   });
});

Als erstes speichern wir das Ladebildchen in der Variable loader. Man könnte das auch direkt in den HTML-Teil setzen, aber da gehört es meiner Meinung nach nicht hin. Danach verstecken wir das eigentliche Bild mit dem Befehl $('.image').hide(); und binden das Ladebildchen mit dem Befehl $('.image_frame').append(loader); ein. Nun kommt die Funktion, die das Ladebildchen verschwinden lässt, sobald das eigentliche Bild fertig geladen ist und dieses behutsam einblendet. Das wars auch schon.

Zum Schluss brauchen wir noch eine Portion CSS, damit das ganze auch so aussieht wie in der Demo:

CSS
.wrap {
	width: 556px;
	padding: 30px 0 0 30px;
	margin: 0 auto;
	clear: left;
}

h1 {
	margin-bottom: 30px;
}

.image_frame {
	position: relative;
	width: 246px;
	height: 166px;
	margin: 0 30px 30px 0;
	float: left;
	display: inline;
	border: 1px solid #EEE;
}

.image_frame img {
	padding: 1px;
	border: 2px solid #EEE;
}

.image_frame a:hover img {
	padding: 1px;
	border: 2px solid #CCC;
}

img.load {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 67px;
	left: 107px;
	border: 0;
}

Das ganze kann man ganz nach seinen Bedürfnissen anpassen. Wichtig ist nur, dass die Angabe position: relative bei der Klasse .image_frame stehen bleibt, damit sich das Ladebildchen innerhalb des dazu gehörenden <div>-Tags absolut positionieren lässt. Und falls euch das Ladebildchen nicht so zusagt, findet ihr auf Ajaxload.info Alternativen.

Ansonsten bitte ich wie immer, bei Fragen oder Anregungen die Kommentarfunktion zu nutzen.