Quick Info

Es werden verschiedene Bereiche per PHP-Seiten definiert und per include Anweisung auf den einzelnen Seiten eingefügt.

Das Navigationsmenü ist in der Seite nav.php

Obwohl auf allen Seiten die gleiche nav.php eingebunden ist, wird dennoch das Navigationselement, welches zur aktuell aufgerufenen Seite gehört, weiß eingefärbt.

Im Quelltext einer Seite sieht man, dass das a-Element welches die eigene Seite aufruft eine Klasse zugewiesen bekommt: class="aktuell". Dazu wird zuerst ermittelt wie die aktuelle Seite lautet. Das geschieht indem man in PHP mit $_SERVER["PHP_SELF"] den Pfad zur aktuellen Datei vom Root Verzeichnis aus ermittelt. Für diese Seite ist es: /tutor/php/dynMenue/info.php

Dieser String wird mittels explode() in ein Array umgewandelt.

$self = explode("/", $_SERVER["PHP_SELF");

Die einzelnen Arrayelemente sind die Inhalte zwischen den Schrägstrichen. Das letzte Arrayelement entspricht dem Namen der aktuell aufgerufenen Seite. Diese wird in der Variablen $aktSeite abgelegt und lautet beispielsweise info.php

  $aktSeite =  $self[count($self) - 1];

Das Navigationsmenü wird mittels eines verschachtelten Arrays erstellt. In dem Array liegen die urls und die Namen der Seiten. In einer foreach() Schleife wird das Array durchlaufen und überprüft ob die URL aus dem Array der aktuellen Seite $aktSeite entspricht. Ist das der Fall, bekommt die Variable $akt = "class='aktuell'" zugewiesen ansonsten einen leeren String. Diese $akt wird dann dem a Element hinzugefügt

<?php
$self = explode("/", $_SERVER["PHP_SELF"]);
$aktSeite =  $self[count($self) - 1];
$href = [
["index.php", "HOME"],
["dateien.php", "DATEIEN"],
["info.php", "INFO"],
["hirtenbrief.php", "HIRTENBRIEF"],
["impressum.php", "IMPRESSUM"]
];
echo "<nav>\n<ul>\n";
    foreach ($href as $ziel) {
    $akt = ($ziel[0] == $aktSeite  ? " class='aktuell'" : "";
     echo "<li><a href='$ziel[0]'" . $akt . ">$ziel[1]</a></li>\n";
      }
echo "</ul>\n</nav>";
?>

Die CSS Datei sorgt dafür, dass die Hintergrundfarbe der Klasse "aktuell" eine weiße Hintergrundfarbe bekommt.

.aktuell {
  background-color: white;
  color: black;
}