Wie markiert man in einer Navigation die aktuelle, gerade besuchte Seite? Handgecodet? Automatisch mit CSS? Mit JavaScript? Oder PHP? Ein Überblick über die verschiedenen Techniken und Hilfe bei der Entscheidung welche gerade die richtige ist.
Handwerker Methode
Als Beispielmenü nehmen wir die Navigation in ihrer grundlegendsten Form: die Ungeordnete List <ul> mit drei Menüeinträgen:
<ul id="nav>
<li><a id="aktuell" href="#">Seite eins</a></li>
<li><a href="seite2.html">Seite zwei</a></li>
<li><a href="seite3.html">Seite drei</a></li>
</ul>
Der handwerkende Webmaster baut für die aktuelle Seite im Menü jeweils die id=“aktuell“ ein. Auf Seite eins sieht das so aus wie oben, auf Seite zwei wie unten, und so weiter auf allen Folgeseiten.
<ul id="nav>
<li><a href="seite1.html">Seite eins</a></li>
<li><a id="aktuell" href="#">Seite zwei</a></li>
<li><a href="seite3.html">Seite drei</a></li>
</ul>
Das Menü muss auf jeder HTML-Seite extra angepasst werden. Im Stylesheet wird die id=“aktuell“ wie gewünscht formatiert, zum Beispiel in weißer Schrift vor rotem Hintergrund::
#nav a#aktuell { background-color: #ff0000; color: #fff; }
Live Demo im neuen Fenster: Seitenmarkierung manuell
Das Anbringen der id=“aktuell“ im Menü auf jeder HTML-Seite ist für kleinere, statische Websites meist die schnellste Lösung. Anders sieht es bei größeren, dynamischen Seiten aus oder wenn zum Beispiel Dreamwaever-Templates verwendet werden. Hier eignet sich die body tag-Technik besser.
body tag-Technik
In unserer Minimalnavigation erhält jede Seite eine ein eigene <id>:
<ul id="nav>
<li><a id="eins" href="seite1.html">Seite
eins</a></li>
<li><a id="zwei" href="#">Seite zwei</a></li>
<li><a id="drei" href="seite3.html">Seite
drei</a></li>
</ul>
Diese Navigation ist auf allen Seiten identisch. Sie eignet sich damit bestens für copy&paste, als Template oder PHP-Modul. Damit wir die Seiten unterscheiden können, erhält der body tag jeder Seite eine eigene Klasse (class=“ „)
<body class="eins">
auf der ersten Seite, <body class=“zwei“> auf der zweiten Seite und so weiter. Im CSS-Teil vergleichen wir den Klassennamen von body mit der id der Menüeinträge und können, wo diese gleich sind, den aktuellen Menüpunkt formatieren:
body.eins ul#nav li a#eins,
body.zwei ul#nav li a#zwei,
body.drei ul#nav li a#drei
{ background-color: #ff0000; color: #fff; }
Live Demo im neuen Fenster: Seitenmarkierung mit body tag
Damit die aktuelle Seite richtig formatiert wird, muss das CSS für die aktuelle Seite im Stylesheet nach den normalen Menüformatierungen kommen – der letzte Eintrag überschreibt die vorherigen Angaben. In komplexen Menüs kann die Auflistung der CSS-Selektoren schnell unübersichtlich werden, bei einer Änderung des Menüs müssen die Selektoren angepasst werden – das bedeutet zusätzliche Arbeit und eine mögliche Fehlerquelle.
Markieren mit JavaScript
Markieren mit JavaScript ist die mit Abstand bequemste Methode. Das Menü bleibt wie es ist, ohne zusätzliche Klassen, ids oder divs:
<ul id="nav>
<li><a href="seite1.html">Seite eins</a></li>
<li><a href="seite2.html">Seite zwei</a></li>
<li><a href="seite3.html">Seite drei</a></li>
</ul>
Ein kleines JavaScript vergleicht die aktuelle Seite mit den Link-Adressen im Menü und fügt die id=“aktuell“ selbsttätig ein. Das Skript kommt in den <head> jeder Seite:
<script type="text/javascript">
onload = function(){getcurrentpage();}
function getcurrentpage()
{
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
var locHref = location.href;
for (var i=0; i<anchors.length ;i++)
if (anchors[i].href==locHref)
return anchors[i].id = "aktuell";
}
</script>
Auf CSS-Seite formatieren wir die Links mit der id=“aktuell“:
#nav a#aktuell {
background-color: #ff0000;
color: #fff;
}
Live Demo im neuen Fenster: Seitenmarkierung mit JavaScrit
Auch hier gehört das CSS für die aktuelle Seite hinter die anderen Menüformatierungen. Ist im Browser JavaScript ausgeschaltet, funktioniert das Menü, aber die Markierung der aktuellen Seite fehlt.
Profi-Lösung mit PHP
Diese Methode funktioniert immer, auch bei abgeschaltetem JavaScript, setzt aber Zugang zu einem PHP-fähigen Server voraus. Das Menü generiert der Server bei jedem Seitenaufruf. Dazu schreiben wir es als PHP-Codeblock:
<ul id="nav">
<li<?php if ($thisPage=="eins") echo " id=\"aktuell\""; ?>>
<a href="seite1.php">Seite eins</a></li>
<li<?php if ($thisPage=="zwei") echo " id=\"aktuell\""; ?>>
<a href="seite2.php">Seite zwei</a></li>
<li<?php if ($thisPage=="drei") echo " id=\"aktuell\""; ?>>
<a href="seite3.php">Seite drei</a></li>
</ul>
Der Code für das Menü kommt als nav.php auf den Server. An der Stelle, wo es bisher im HTML-Quelltext stand, rufen wir es mit
<?php include("nav.php"); ?>
vom Server ab. Ganz am Anfang jeder Seite, noch vor <html>, identifzieren wir die einzelnen Seiten mit
<?php $thisPage="eins"; ?>
auf der ersten Seite, <?php $thisPage=“zwei“; ?> auf der zweiten Seite und so weiter. Beim Verlinken im Menü und beim Abspeichern der Seiten ist darauf zu achten, dass alle Seiten jetzt die passende .php Endung bekommen. Im Sytlesheet bleibt als letzter Schritt schließlich das Formatieren der aktuellen Seite:
#nav li#aktuell a {
background-color: #ff0000;
color: #fff;
}
Live Demo im neuen Fenster: Seitenmarkierung mit PHP
Material zum Thema:
- Alle Beispiele zum Download (ZIP Archiv)
Erstveröffentlichung 03.11.2006
