Jedes Web besitzt ein Menü, um den Benutzer durch die Seiten zu navigieren.
Bei kleineren bis mittelgroßen Webs genügen dabei meist zwei Navigationsebenen,
um alle Punkte unterzubringen. Jeder Webmaster hat dabei das Problem, das Menü
möglichst dynamisch zu halten, um nicht bei einer späteren Änderung, wenn z.B.
ein neuer Navigationspunkt hinzukommt, die Änderung auf allen Seiten manuell
nachziehen zu müssen. Ein Lösungsansatz bietet hierbei PHP. In diesem Artikel
möchte ich Ihnen eine Navigation mit 5 Haupt- und jeweils 5 Unterseiten vorstellen,
die sehr einfach zu implementieren und zu pflegen ist.
Ausgangspunkt der Überlegung ist die Entwicklung eine PHP-Rahmenseite, die
ein horizontales Menü enthält, das sich über die ganze Seite erstreckt, und
in die die anzuzeigende HTML-Seite beim Aufruf eingebunden wird. Dies hat den
Vorteil, dass das Menü an zentraler Stelle nur einmal gepflegt werden muss.
Die einzelnen Teile der Seite stecken in jeweils einer Zeile einer Haupttabelle.
In unserem Beispiel haben wir drei Teile: eine Kopfzeile, in der die Überschrift
untergebracht ist, eine Menüzeile, in der das Menü steckt und einer Inhaltszeile,
in die eigentliche HTML-Seite per PHP-Include-Befehl
eingefügt wird.
<!-- Kopfzeile -->
<tr><td height="40" align="left" valign="top">
<h1>PHPMenu</h1>
</td></tr>
<!-- Navigation -->
<tr><td height="60" align="left" valign="top">
...
</td></tr>
<!-- Inhalt -->
<tr><td align="left" valign="top">
...
</td></tr>
Die Kopfzeile
In der Kopfzeile kann man entweder wiederum eine Tabelle unterbringen, in
der ein Logo und andere zentrale Inhalte untergebracht sind. In unserem Beispiel
beschränken wir uns auf eine simple Überschrift.
Das Menü
Das Navigationsmenü besteht wiederum aus einer Tabelle mit zwei Zeilen/Zellen.
In der ersten Zeile sollen alle Hauptmenüpunkte enthalten sein und in der zweiten
die zum ausgewählten Hauptpunkt dazugehörigen Unterpunkte, die jeweils eine
anzuzeigende Web-Seite repräsentieren. In beiden Zellen sind die A-Tags (Links)
einfach aneinander gereiht:
<table...>
<tr>
<td id=nav class=darkgreyback height=24px>
<a href=...>Hauptpunkt 1</a>
<a href=...>Hauptpunkt 2</a>
...
</td>
</tr>
<tr>
<td id=subnav class=lightgreyback height=20px>
<a href=...>Unterpunkt 1</a>
<a href=...>Unterpunkt 2</a>
...
</td>
</tr>
</table>
Die Formatierung der Zellen und der Links bewerkstelligt eine eingebundene
Cascading-Style-Sheet-Datei, inklusive eines Hover-Effektes, sobald die Maus
einen der Menüpunkte berührt. Wichtigester Teil ist jedoch die Unterscheidung
zwischen einem selektierten Menüpunkt und allen anderen. Der Link der Seite,
der aktuell angezeigt wird, wird mit der Classe sel
versehen, der eine andere Hintergrundfarbe besitzt. Dies gilt sowohl für den
Haupt- als auch für den Unterpunkt (#nav bzw.
#subnav).
td.darkgreyback { padding:0px; background-color: #B2B2B2; }
td.lightgreyback { padding:0px; background-color: #CCCCCC; }
#nav a {
height: 24px; padding: 4px; margin: 0px;
color:#FFFFFF; text-decoration:none;
}
#nav a:hover {
background-color:#727AC5;
color:#FFFFFF; text-decoration:none
}
#nav a.sel, a:hover.sel { background-color:#727AC5; }
#subnav a {
height: 20px; padding: 2px; margin: 0px;
color:#FFFFFF; text-decoration:none;
}
#subnav a:hover {
background-color:#9DA3D7;
color:#FFFFFF; text-decoration:none
}
#subnav a.sel, a:hover.sel { background-color:#9DA3D7; }
Der Inhalt
In der Inhaltzelle ist, wie beim Menü eine Untertabelle enthalten, die jedoch
nur eine einzige Zelle beinhaltet, in die der Inhalt der anzuzeigenden HTML-Datei
per Include-Anweisung eingesteuert wird. Wenn man
möchte, kann man zudem den unteren Rand der Seite durch eine weitere leere Zelle
abgrenzen.
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<?php include("$page"); ?>
</td>
</tr>
<tr><td height=30><br></td></tr>
</table>
Die in unserem Beispiel verwendete $page-Variable
wird über einen der PHP-Seite übergebenen Parameter bestückt. Dieser Parameter
enthält mindestens zwei durch einen Schrägstrich separierte Worte, die den Pfad
zu einem Unterpunkt repräsentieren, also z.B. 'haupt3/unter2', um zum 2. Unterpunkt
des 3. Hauptpunkt zu gelangen. Um nun möglichst wenig Pflegeaufwand zu haben
entspricht die Site-Struktur, d.h. die im Web enthaltenen Ordner genau diesem
Konzept (siehe Abb.).
Mit Hilfe eines solchen Parameters lässt sich nun mittels PHP recht einfach
der Pfad zur anzuzeigenden HTML-Seite ermitteln. Der notwendigen Code wird im
Kopf (Head) der PHP-Seite abgelegt:
<?php
// Parameter aus der URL auslesen
// Wenn er leer sein sollte, wird eine Standardseite angezeigt
if (empty($_GET['page'])) {
$page = "haupt1/unter1";
} else {
$page = $_GET['page'];
}
// Überprüfen, ob die Seite existiert
// Wenn nicht, wird eine Fehlerseite angezeigt
if (file_exists($page.".htm")==false) $page = "haupt1/error";
// Für die Menüführung:
// Variable am Schrägstrich zerlegen und in einem Array ablegen
$array = explode("/",$page);
// Für die Menüführung: Haupt- und Unterpunkt festlegen
$parent = $array[0];
$child = $array[1];
// Seitenname generieren
$page = $page.".htm";
?>
Mit diesem Konzept lassen sich auch weitere Ebenen abbilden. Lautet zum Beispiel
der Parameter 'haupt2/unter4/ordner10/seite12', so wird durchaus die richtige
Seite angezeigt, lediglich das hier vorgestellte Zwei-Ebenen-Menü bleibt auf
Hauptpunkt 2 und Unterpunkt 4 stehen.
WICHTIG: Die HTML-Seiten selbst, sollten aufgrund der
Tatsache, dass sie in eine andere Seite eingefügt werden, keine HTML-, HEAD-
oder BODY-Tags enhalten, da es sonst zu unerwünschten Nebeneffekten kommen kann,
je nachdem wie ein Browser das Vorhandensein z.B. zweier BODY's interpretiert.
Die Anzeige des Menüs
Wie bereits im oben abgebildeten PHP-Code ersichtlich wird, benutzen wir
den Parameter auch für die korrekte Anzeige der Navigation. Wir müssen im Prinzip
nur noch unterscheiden, ob der übergebene Haupt- und Unterpunkt selektiert sein
soll oder nicht (CSS-Klasse sel oder nicht). Dies
erledigen wir anhand der beiden Variablen $parent
und $child mit einer PHP-Fallunterscheidung beim Aufbau
des Menüs im HTML-Code, wobei zunächst in einem switch-Statement
anhand des Hauptpunktes verzweigt wird und anschließend mit einem
if-Statement entschieden wird, ob an einen Link die
sel-Klasse angelegt werden soll.
<?php
switch ($parent) {
case "haupt1":
?>
<!-- Untermenü 1 -->
<a <?php if($child=="unter1") echo "class=sel"; ?>
href="/index.php?page=haupt1/unter1"> Unterpunkt 1.1 </a>
<a <?php if($child=="unter2") echo "class=sel"; ?>
href="/index.php?page=haupt1/unter2"> Unterpunkt 1.2 </a>
<a <?php if($child=="unter3") echo "class=sel"; ?>
href="/index.php?page=haupt1/unter3"> Unterpunkt 1.3 </a>
<a <?php if($child=="unter4") echo "class=sel"; ?>
href="/index.php?page=haupt1/unter4"> Unterpunkt 1.4 </a>
<a <?php if($child=="unter5") echo "class=sel"; ?>
href="/index.php?page=haupt1/unter5"> Unterpunkt 1.5 </a>
<?php
break;
... (Fälle 2 - 4) ...
case "haupt5":
?>
<!-- Untermenü 5 -->
<a <?php if($child=="unter1") echo "class=sel"; ?>
href="/index.php?page=haupt5/unter1"> Unterpunkt 5.1 </a>
<a <?php if($child=="unter2") echo "class=sel"; ?>
href="/index.php?page=haupt5/unter2"> Unterpunkt 5.2 </a>
<a <?php if($child=="unter3") echo "class=sel"; ?>
href="/index.php?page=haupt5/unter3"> Unterpunkt 5.3 </a>
<a <?php if($child=="unter4") echo "class=sel"; ?>
href="/index.php?page=haupt5/unter4"> Unterpunkt 5.4 </a>
<a <?php if($child=="unter5") echo "class=sel"; ?>
href="/index.php?page=haupt5/unter5"> Unterpunkt 5.5 </a>
<?php
}
?>
Mit dieser fertigen PHP-Seite sind wir nun in der Lage nach Herzenslust HTML-Seiten
zu kreieren, ohne uns um die Nachführung des Menüs zu kümmern.
Downloads
phpmenu.zip