Menü mit Hintergrund(farbe)
Dave Sheas CSS Sprites2 – It’s JavaScript Time zeigt eine Verfeinerung der seit Jahren gebräuchlichen CSS-Spritetechnik, bei der Hintergrundbilder beim Hovern über Links etc. verschoben werden. Dieses verschieben kann man natürlich, bspw. mit jQuery smoother machen, und damit vielleicht noch ein wenig schöner.
Foto von © Erdbeertorte@photocase.com
Hier in diesem Block habe ich auf die Sprites bei den Menüs jedoch verzichtet, sie sind so minimalistisch, dass eine Änderung der Hintergrundfarbe völlig ausreichte. Trotzdem, kann man natürlich auch diesen Effekt ein wenig – ich sag’s nochmal – smoother gestalten. Natürlich auch mit jQuery, aber ein wenig anders als bei Shea.
Plugin nötig
Zunächst mal gehören Farbanimationen nicht zur Standardausrüstung der aktuellen jQuery-Version, dazu ist ein kleines Plugin nötig, das jQuery-Erfinder John Resig freundlicherweise zur Verfügung gestellt hat: jQuery Color Animations.
Ausgangszustand
Mein Menü basiert auf einer unsortierten Liste. Jedes der Listenelemente hat einen eigenen Klassennamen und einen Link darin.
HTML
<ul class="nav">
<li class="homepage"><a href="http://codecandies.de/">Homepage</a></li>
<li class="archives"><a href="http://codecandies.de/archiv">Archiv</a></li>
<li class="topics"><a href="http://codecandies.de/ressort/themen/">Themen</a></li>
<li class="about"><a href="http://codecandies.de/about/">About</a></li>
<li class="impressum"><a href="http://codecandies.de/impressum/">Impressum</a></li>
</ul>Das CSS für solche Situationen ist denkbar einfach, die Ankerelemente sind dabei als display:block ausgeführt. Um dem Besucher die aktuelle Position auf der Seite zu signalisieren, sind dem <body> passende Klassen hinzugefügt, die u.a. hier genutzt werden.:
CSS
ul.nav li a {
display: block;
/* ein wenig gekürzt */
}
ul.nav li a:link,
ul.nav li a:visited {
background: #45423a;
color: #a59f8c;
}
ul.nav li a:hover {
background: #8f8c86;
color: #fff;
}
body.homepage li.homepage a,
body.archives li.archives a,
body.topics li.topics a,
body.about li.about a,
body.portfolio li.portfolio a,
body.bookmarks li.bookmarks a,
body.impressum li.impressum a {
background: #5f5d59;
color: #fff;
cursor: default;
}Los geht’s
So funktioniert das Menü also, ganz ohne Javascript, schon seit Monaten. Ich weiss: kein Hexenwerk. Genauso wenig, wie das Javascript, dass man nun nur noch darauf packen muss, damit es smoothed:
Javscript
jQuery(document).ready(function() {
jQuery(".nav li:not(li." + document.body.className + ") a").hover(
function() {
jQuery(this).css("background-color", "#45423a");
jQuery(this).stop().animate( { backgroundColor: '#8f8c86' }, 500);
}, function() {
jQuery(this).stop().animate( { backgroundColor: '#45423a' }, 500);
}
);
}Auffälig vielleicht der Selektionsstring: jQuery(".nav li:not(li." + document.body.className + ") a"). Vorlesen erklärt es: selektiert werden innerhalb von .nav li, die nicht die gleiche Klasse wie der body des Dokuments haben und in denen alle Links, also a. Beim Hover-Event wird dort dann zunächst die Hintegrundfarbe zurückgesetzt (um das Original CSS ausser Kraft zu setzen) und dann die neue Farbe hinzu animiert. Fertig.
2 Kommentare
Dirk
03.10.2008, 17:26 Uhr
Hübsch. Macht aber die aktuelle Selektion kaputt, wenn man darüber hovert.
Nico Brünjes
03.10.2008, 18:32 Uhr
Hmm, das soll doch gerade nicht, da hab ich doch irgenwo etwas vergessen…
Update: Stimmt, hier bei mir funktioniert das so gar nicht komplett. Ich übersah, dass ich auch body-Klassen zugeordnet habe, die nicht genauso heissen, wie die li-Klassen (bspw. “article” bei Artikeln). Dabei steht’s im (CSS)-Code. Getestet hatte ich nur auf der Homepage. :P
Mal sehen, da lass ich mir mal noch etwas einfallen…
Und noch ein Update: gefixt. Habe die “fehlerhafte” Architektur auf Template-Seite geändert. Die body-Klasse heisst jetzt genauso wie die Li-Klasse. Thx für den Tip.