Automatisierte CSS-Listen-Navigation, mit der ID #current über PHP-include in eine Webseite eingebunden, ist für jeden Webseiten-Ersteller eine Arbeitserleichterung.
Ich möchte Ihnen in diesem Artikel zeigen, wie Sie dem Besucher Ihrer Webseite, anhand der Navigation verdeutlichen können, welche Seite er gerade im Browser geöffnet hat. Mit CSS und PHP kann das in wenigen Schritten realisiert werden.
Der übliche Weg - wenn man eine Listen-Navigation mit CSS ertellt - ist, dass man den Link der Seite, welche gerade im Browser geöffnet ist, mit einer CSS-Klasse oder ID "current" formatiert.
<li class="current">Seite 1</li>
Aktualisiert man nun die Webseite durch neue Artikel und verlinkt diese in der Navigation, muß die Navigation der kompletten Webseite geändert werden, was sehr zeitaufwendig ist.
Darum läßt man es meistens und behilft sich mit einem "breadcrumb" (Sie befinden sich hier: ......)
Der Ursprung dieses Artikels stammt von Jason Pearce und ist auf der Webseite A List Apart veröffentlicht.
Mit wenigen Zeilen PHP wird die Navigation automatisiert und per "include" an der Stelle eingebunden wo die Navigation erscheinen soll.
Wichtig ist:
Ihr Hooster unterstützt PHP; das tun ja mittlerweile alle.
Ihre Webseiten erhalten die Endung .php
Achten Sie auf die genaue Schreibweise des PHP-Codes (Leerstellen u.s.w.), sonst tappen Sie in die gleiche Falle wie ich, denn außer Errors bekommt man nichts zu sehen.
Zum testen muß die Seite online gestellt werden oder auf einem lokalen Server (xampp) getestet werden.
Im ersten Schritt erstellen Sie sich eine neue Datei "navigation.php"
In diese Datei wird der Quellcode der Navigation geschrieben, die später mit dem Befehl
<?php include("navigation.php");?>
in die einzelnen Webseiten eingebunden wird.
So könnte das HTML aussehen.
<div id="navigation">
<ul>
<li<?php if ($thisPage=="seite_1.php")
echo " id=\"currentpage\""; ?>>
<a href="seite_1.php">Seite 1</a></li>
<li<?php if ($thisPage=="seite_2.php")
echo " id=\"currentpage\""; ?>>
<a href="seite_2.php">Seite 2</a></li>
<li<?php if ($thisPage=="seite_3.php")
echo " id=\"currentpage\""; ?>>
<a href="seite_3.php">Seite 3</a></li>
</ul>
</div>
Da die Navigation ihr Aussehen durch CSS erhält, brauchen Sie auch noch eine CSS-Datei die im <head></head> der Seiten eingebunden wird.
<link href="navigation.css" rel="stylesheet" type="text/css" />
Das CSS könnte so aussehen.
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
background: #ccc;
border-left: 1px solid #999;
float: left;
margin: 0;
padding: 0;
}
#navigation a {
color: #666;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
}
#navigation a:hover {
color: #333;
}
#navigation #currentpage a {
background: #fff;
color: #333;
}
Im nächsten Schritt brauchen alle Seiten eine eindeutige Kennung, damit PHP weiß wann der "current-Befehl" angewendet werden soll.
Fügen Sie auf allen Seiten folgenden Code in die 1. Zeile des Quellcodes ein
<?php $thisPage="seite_1.php"; ?>
"seite_1.php" wird durch den tatsächlichen Namen Ihrer Seite ersetzt.
Das gleiche gilt auch für die Navigation.
Laden Sie nun Ihre Dateien auf den Server und starten Sie einen Testlauf. Wenn alles richtig gemacht wurde, erhält der Server beim Klick auf einen Link eine Anfrage, die er hoffentlich richtig zurückgibt.
Download der Dateien als ZIP-Archiv
