24.01.2009

Link der geöffneten Seite bei includetem Menue hervorheben

Die herkömmliche Weise, den Link einer geöffneten Seite hervorzuheben ist in dieser Anleitung beschrieben.
Ist die Navigation dagegen mit einem PHP-Script includet, so kann zum Erreichen dieses Zwecks entsprechend der nachfolgenden Anleitung vorgegangen werden.

Voraussetzungen:

Anstelle des kompletten HTML-Menue-Codes wird an der Stelle wo die Navigation platziert werden soll (hier im Beispiel in einen <div id="menue">), folgendes Script eingesetzt:

<?php
include ("menue.php");
?>

Mit einem Editor wird nun der HTML-Code für die Navigation erfasst und unter "menue.php" abgespeichert.
Im Beispiel für drei Seiten "Home", "About me" und "Hobbies".
Unter Berücksichtigung der Darstellung aktiver Links ergibt sich folgender Navigationscode:

<div id="menue">
<ul>

<li<?php if ($thisPage=="Home")
echo " id=\"aktiv\""; ?>>
<a href="index.php">Home</a></li>

<li<?php if ($thisPage=="About me")
echo " id=\"aktiv\""; ?>>
<a href="aboutme.php">About me</a></li>

<li<?php if ($thisPage=="Hobbies")
echo " id=\"aktiv\""; ?>>
<a href="hobbies.php">Hobbies</a></li>

</ul>
</div>

Werden künftige Änderungen bei der Navigation erforderlich, ist nur diese Datei entsprechend anzupassen.

Auf der Seite "index.php" im Quelltext ganz oben (am besten in der ersten Zeile vor vor Doctype und vor <head>) folgenden Code einfügen:

<?php $thisPage="Home"; ?>

Auf der Seite "About me" ebenfalls ganz oben folgenden Code einfügen:

<?php $thisPage="About me"; ?>

Ebenso mit allen weiteren Seiten verfahren.

Jetzt noch die Formatierung für den Link der jeweils angezeigten Seite per CSS entsprechend den eigenen Vorstellungen definieren, z.B. so:

#menue #aktiv a
{
color:#fff;
background-color: #f00;
font-weight:bold;
}

Als Ergebnis dieses Beispiels müsste dann der jeweils aktive Link in weißer Schrift auf rotem Hintergrund angezeigt werden.

Kurzerläuterung:
Auf jeder Seite wird im Quelltext ganz oben der Seitenname als Variable hinterlegt. In der Navigation wird abgefragt, ob die gerade geöffnete Seite dem auf dieser Seite hinterlegtem Namen entspricht.
Ist dies der Fall, wird der Link mit den unter "#menue #aktiv a" hinterlegten Styleangaben besonders formatiert.

nach oben