Moin
Naja, selbst wenn die Navigation bei dir derzeit alleine existiert, wird sie ja wohl zu einem späteren Zeitpunkt des Projektverlaufs ihrem angedachten Verwendungszweck zugeteilt: nämlich entweder einzelne Dokumente (Seiten) aufrufen, oder beispielsweise mit der serverseitigen Scriptsprache PHP die Inhalte dynamisch in das Hauptdokument laden.
Und für diesen in der Praxis doch weit verbreiteten Anwendungsfall hab ich dir jetzt mal ein kleines Beispiel erstellt - Stichwort: eine Navigation mit "
index.php?section=link1".
Wir haben also ein Dokument namens
index.php, in das in einem vordefinierten Anzeigebereich
#contentBox die verlinkten Inhalte
link1.php, link2.php und
link3.php hineingeladen werden.
Als Arbeitsvorlage hat "Teil 1" meines CSS-Tutorials "
CSS-Rollover" gedient, den ich zusätzlich mit zwei PHP-Scripts ausgestattet habe, um zum einen im DIV
#contentBox die Inhalte reinzuladen, und zum anderen beim Aufruf eines Inhalts, die CSS-Klasse des Links zu tauschen, damit sein "aktives" Hintergrundbild angezeigt wird.
Hierfür habe ich das Stylesheet, insbesondere die Selektoren neu strukturiert, da entgegen meinem Tutorial die Links nun keine IDs mehr besitzen, sondern im Normalzustand mit der Klasse
.normal ausgezeichnet sind, die beim Aufruf des Verweiszieles in die Klasse
.current gewechselt wird.
Stattdessen besitzen nun die einzelnen Listenpunkte
li der Hauptmenüpunkte den jeweiligen ID-Bezeichner, damit die Links weiterhin im Markup trotz ihres gleichlautenden Klassenbezeichners voneinander unterschieden und ihnen ihre individuellen Hintergrundbilder zugeordnet werden können:
Code:
<ul id="nav">
<li id="link1"><a href="index.php?section=link1" class="<?php echo $styles['link1']; ?>"><span>Link 1</span></a></li>
<li id="link2"><a href="index.php?section=link2" class="<?php echo $styles['link2']; ?>"><span>Link 2</span></a></li>
<li id="link3"><a href="index.php?section=link3" class="<?php echo $styles['link3']; ?>"><span>Link 3</span></a></li>
</ul>
In deiner Menüstruktur lauten diese IDs weiterhin
#home, #sport, #food usw.
Und das ist der relevante überarbeitete Auszug aus dem Stylesheet mit der neuen Selektor-Architektur für das Menü:
Code:
/* #link1 */
ul#nav li#link1 a.normal:link, ul#nav li#link1 a.normal:visited {
background-image:url(bgImage/link_1_normal.png);
}
ul#nav li#link1 a.normal:hover, ul#nav li#link1 a.current {
background-image:url(bgImage/link_1_active.png);
}
/* #link2 */
ul#nav li#link2 a.normal:link, ul#nav li#link2 a.normal:visited {
background-image:url(bgImage/link_2_normal.png);
}
ul#nav li#link2 a.normal:hover, ul#nav li#link2 a.current {
background-image:url(bgImage/link_2_active.png);
}
/* #link3 */
ul#nav li#link3 a.normal:link, ul#nav li#link3 a.normal:visited {
background-image:url(bgImage/link_3_normal.png);
}
ul#nav li#link3 a.normal:hover, ul#nav li#link3 a.current {
background-image:url(bgImage/link_3_active.png);
}
Das vollständige Beispiel incl. den PHP-Scripts, sowie den erforderlichen Grafik- und PHP-Dateien lad ich hier als ZIP-Archiv hoch.
So, nun wünsche ich dir viel Spaß beim Testen und Studieren, und hoffe, dass dir der Code nicht zu "kryptisch" erscheint, und du mit der angewandten Technik zurechtkommst
mfg Maik
