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.
Navigation im Googlemail-Style mit jQuery
Wer Googlemail benutzt, kennt sicherlich die Buttons mit dem Grauverlauf und den abgerundeten Ecken, die jedoch ohne eine Grafik auskommen. So etwas kann man relativ schnell selber machen, man muss nur genug HTML-Tags "in den Topf werfen". In diesem Tutorial zeige ich euch, wie ihr das mithilfe von jQuery bewerkstelligen könnt. jQuery deshalb, weil man einfach HTML-Tags hinzufügen kann und der eigentliche Quelltext schön sauber bleibt.
Und wenn wir schon beim Thema sind, fangen wir am besten mit dem Quelltext an. Dieser sieht so aus:
HTML
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul>
Eine schlanke, ungeordnete Liste, wie es sich gehört. Allerdings brauchen wir nun ein Element, um die abgerundeten Ecken darzustellen, zwei weitere Elemente um den Grauverlauf zu bilden, und nochmal zwei Elemente um die geprägte Schrift auf den Buttons hinzubekommen.
Summa sumarum müssen also 5 Tags hinzugefügt werden, um den grafischen Effekt hinzubekommen. Deshalb auch die Javascript-Lösung, da bspw. Suchmaschinen-Bots oder Menschen an Screen-Readern nichts mit dieser Fülle an HTML-Elementen anfangen können.
Hier nun die benötigten Javascript-Angaben:
Javascript
$(document).ready(function() {
var start = "<span class=\"layer_1\"><span class=\"layer_2\"></span><span class=\"layer_3\"></span><span class=\"layer_4\">";
var middle = "</span><span class=\"layer_5\">";
var end = "</span></span>";
var item = new Array();
$('.navigation li a').each( function() {
item.push(this.innerHTML);
for ( i = 0; i < item.length; i++ ) {
$(this).html(start + item[i] + middle + item[i] + end);
}
});
});
Als erstes werden die benötigten Elemente — in diesem Fall <span>-Tags — in Variablen gespeichert. Danach werden die jeweiligen Beschriftungen der Listen-Elemente in einem Array gespeichert. Zum Schluss wird alles zusammengefügt. Nun fehlen nur noch die entsprechenden Styles, um die Buttons fertig zu machen. Diese gestalten sich wie folgt:
CSS
body {
padding: 100px;
font: normal 12px Helvetica;
font-weight: bold;
background-color: #FFF;
}
.navigation {
height: 20px;
padding: 1px 0;
clear: left;
list-style: none;
}
.navigation li {
position: relative;
width: 82px;
height: 20px;
margin: 0 10px 0 0;
float: left;
display: inline;
}
a, span {
display: block;
text-decoration: none;
}
a:focus {
outline: none;
}
a:link, a:visited {
width: 82px;
height: 20px;
position: relative;
background-color: #DDD;
text-align: center;
line-height: 20px;
color: #333;
z-index: 100;
overflow: visible;
}
a:hover {
background-color: #999;
color: #000;
}
.layer_1 {
width: 80px;
height: 20px;
position: absolute;
top: -1px;
left: 1px;
border: 0;
border: 1px solid #DDD;
border-left: 0;
border-right: 0;
background-color: #F9F9F9;
overflow: hidden;
z-index: 200;
}
a:hover .layer_1 {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.layer_2 {
width: 80px;
height: 2px;
position: absolute;
top: 10px;
left: 0;
background-color: #EEE;
z-index: 300;
}
a:active .layer_2 {
top: 8px;
left: 0;
}
.layer_3 {
width: 80px;
height: 8px;
position: absolute;
top: 12px;
left: 0;
background-color: #E3E3E3;
z-index: 300;
}
a:active .layer_3 {
top: 0;
left: 0;
}
.layer_4 {
width: 80px;
height: 12px;
position: absolute;
top: 5px;
left: 0;
line-height: 12px;
color: #FFF;
text-align: center;
z-index: 400;
}
.layer_5 {
width: 80px;
height: 12px;
position: absolute;
top: 4px;
left: 0;
line-height: 12px;
color: #777;
text-align: center;
z-index: 500;
}
a:hover .layer_5 {
color: #333;
}
Zugegeben, das ist ein ganz schöner Rattenschwanz an CSS-Angaben, aber es lohnt sich. layer_1 ist höher als das <a>-Tag und ragt oben und unten darüber hinaus. Dadurch bekommen wir die abgerundeten Ecken. layer_2 und layer_3 sind leer und erzeugen den Grauverlauf. layer_4 und layer_5 beinhalten die Beschriftung des Buttons und erzeugen den Eindruck geprägter Buchstaben, indem das untere Layer weiße Schrift und einen Offset von einem Pixel in der y-Achse hat.
Das ganze funktioniert im Internet Explorer 6-8, im Firefox, in Opera und in Safari. Andere Browser habe ich nicht getestet, allerdings sollte es mit keinem modernen Browser Probleme geben.
Für Anmerkungen nutzt bitte die Kommentarfunktion, ich freue mich immer über Anregungen und konstruktive Kritik. Solltet ihr noch keine Erfahrungen mit jQuery gemacht haben, empfehle ich euch das Einsteiger-Tutorial in den "Weiterführenden Links".
Weiterführende Links: