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.

Wanzen
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.

Weiterführende Links

Veröffentlicht von

Nico

Nico Brünjes ist Digitalkreativer und Internethandwerker. Seit mehr als 15 Jahren erdenkt, baut und programmiert er moderne, standardkonforme und zugängliche Webseiten in HTML, CSS und Javascript.

3 Gedanken zu „Menü mit Hintergrund(farbe)“

  1. 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. 😛

    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.

Kommentare sind geschlossen.