Zur Startseite

Alles über PHP und MySQL

Eintrag-Details: Dynamisches Menü mit PHP und CSS

05.02.2006

Dynamisches Menü mit PHP und CSS

Häufig bekomme ich die Frage gestellt: Wie kann ich eine flexible und automatische Navigation für meine Internetseiten in PHP programmieren?

[Mehr:]

Prinzipiell ist diese Aufgabe leicht zu lösen. Ein Menü kann recht einfach als eigene Funktion in PHP erstellt werden. Diese Funktion wird dann einfach auf jeder Seite an der passenden Stelle (da wo das Menü erscheinen soll) eingefügt.

Damit im Menü die gerade aktive Seite nicht als Link angezeigt wird, muss die Funktion natürlich "wissen", welche Seite gerade angezeigt wird. So kann das Skript den jeweils aktiven Link entsprechend anders anzeigen. Um die Sache möglichst flexibel zu machen, wird dafür CSS (Cascading Style Sheet) verwendet.

Anmerkung: Die hier vorgestellten Beispiele sollen lediglich das Prinzip verdeutlichen. Bei einigen Einzelheiten würde man in einer endgültigen Anwendung möglicherweise anders vorgehen. Sie dienen hier lediglich als Beispiele, damit das Verfahren anschaulich erläutert werden kann. In meinen Online-Kursen wird selbstverständlich genauer auf Einzelheiten eingegangen.

Die Beispieldaten zu diesem Artikel können Sie als ZIP-Datei hier herunterladen:

navigation.zip herunterladen

Der Seitentext

Die Seite selbst besteht hier nur aus HTML-Kopf, Fuß und der Navigation:

<?php
include 'nav.inc.php';
html_kopf('test Übersicht');
 
zeige_navigation('Übersicht');
 
html_fuss();
?>

Code herunterladen

Die schon erwähnten Funktionen befinden sich alle in der eingefügten Datei "nav.inc.php". Zunächst wird über die Funktion html_kopf() ein valides HTML-Dokument mit Doctype-Deklaration und Head-Bereich erzeugt. Danach folgt die Navigation über den Aufruf der Funktion zeige_navigation('Übersicht').

In diesem ersten Beispiel wird dieser Funktion noch der Navigationstext übergeben (hier: "Übersicht"). Aus diesem findet das Skript dann heraus, um welche Seite es sich hier handelt. Sie werden später noch ein zweites Beispiel sehen, bei dem die aktive Seite aus dem Dateinamen automatisch ermittelt wird.

Advertisement/Werbung

Die Anzeigefunktion

Die Funktion zeige_navigation() sieht so aus:

function zeige_navigation($current)
{
    $nav_ary = array(
        array("Übersicht", "index.php", 0),
        array("Tipps und Tricks", "tipps.php", 0),
        array("Tipp 1", "tipp1.php", 1),
        array("zu Tipp1", "zusatz1.php", 2),
        array("Tipp 2", "tipp2.php", 1),
        array("Tipp 3", "tipp3.php", 1),
        array("Kontakt", "kontakt.php", 0)
        );
 
    foreach ($nav_ary as $key => $value)
    {
        echo insert_link($value[0], $value[1], $current, $value[2]);
    }
}

Code herunterladen

Um das Menü für spätere Änderungen und Erweiterungen flexibel zu halten, werden alle Menüpunkte in einem Array festgelegt. Dabei handelt es sich um ein zweidimensionales Array. Jeder Eintrag dieses Arrays enthält wiederum ein Array mit drei Elementen:

Die Beschriftung des Navigations-Links
Der Dateiname, der beim Anklicken aufgerufen werden soll
Die Nummer der Ebene 0, 1 oder 2 für Untermenüs

Das Array wird über eine foreach-Schleife Schrittweise abgearbeitet. Jeder Array-Eintrag wird dabei über die Funktion insert_link() in einen entsprechenden Link bzw. Text umgewandelt.

Die Funktion insert_link() sieht dann so aus:

function insert_link($key, $value, $current, $ebene=0)
{
  $menuclass = "menu";
  if ($ebene > 0)
  {
      $menuclass = "submenu";
  }
 
  $result = '<div class="'.$menuclass;
  if ($ebene > 0)
  {
    $result .= ', indent'.$ebene.'">';
  } else {
    $result .= '">';
  }
 
  if ($key == $current)
  {
    $result .= $key;
  } else {
    $result .= '<a href="' . $value.
        '" class="'.$menuclass.'">' .
        $key .'</a>';
  }
    $result .= '</div>';
 
  return $result;
}

Code herunterladen

Ein Hauptmenü sollte zur CSS-Klasse "menu" gehören, während alle Untermenüs mit der Klasse "submenu" ausgezeichnet werden. Das erreicht man über die Abfrage des Parameters $ebene mit der anschließenden Zuweisung zur Variable $menuclass.

Als Ergebnis-Zeichenkette wird die Variable $result verwendet. Hier wird ein entsprechender Code für die Navigation zusammengesetzt. Um eine Einrückung in mehreren Stufen in der CSS-Datei verwenden zu können, werden außerdem die Klassen "indent1", "indent2" usw. verwendet, die aus der Menü-Ebene zusammengesetzt werden. Sie müssen dann später in der CSS-Datei die entsprechenden Klassen mit Eigenschaften (z.B. für margin-left) versehen.

Ist die gerade angezeigte Seite mit dem Menü-Eintrag identisch ($key == $current), so wird kein Link angezeigt, sondern normaler Text. Da der Text ebenfalls in ein <div> der gleichen Klasse eingerahmt ist, wird er genauso angezeigt wie der Navigationslink, nur eben nicht als Link.

Natürlich könnte man das noch erweitern und beispielsweise den aktiven Link einer anderen Klasse (z.B. "menuaktiv") zuweisen.

Die eben gezeigte Lösung ist noch etwas unschön, weil der Link-Text immer beim Aufruf der Funktion zeige_navigation() übergeben werden muss. Der Vorteil dieser Methode ist jedoch, dass dieses Menü auch dann funktioniert, wenn die aufgerufenen Seiten nicht immer unterschiedliche Namen haben. So können Sie die gleiche Seite über verschiedene Links in der Navigation aufrufen.

Alternative Lösung

Wenn Sie für jeden Navigations-Eintrag einen neuen eindeutigen Seitennamen vergeben, können Sie auch die vereinfachte Variante benutzen. Hier wurde die Funktion umbenannt in zeige_navigation2():

function zeige_navigation2()
{
    $nav_ary = array(
        array("Übersicht", "index.php", 0),
        array("Tipps und Tricks", "tipps.php", 0),
        array("Tipp 1", "tipp1.php", 1),
        array("zu Tipp1", "zusatz1.php", 2),
        array("Tipp 2", "tipp2.php", 1),
        array("Tipp 3", "tipp3.php", 1),
        array("Kontakt", "kontakt.php", 0)
        );
 
    foreach ($nav_ary as $key => $value)
    {
        echo insert_link2($value[0], $value[1], $value[2]);
    }
}

Code herunterladen

Der Code ist fast identisch mit dem ersten Beispiel. Lediglich der Aufruf von insert_link() unterscheidet sich hier. Die Funktion wurde daher in insert_link2() umbenannt:

function insert_link2($key, $value, $ebene=0)
{
  $menuclass = "menu";
  if ($ebene > 0)
  {
      $menuclass = "submenu";
  }
 
  $result = '<div class="'.$menuclass;
  if ($ebene > 0)
  {
    $result .= ', indent'.$ebene.'">';
  } else {
    $result .= '">';
  }
 
  if (basename($_SERVER['PHP_SELF']) == $value)
  {
    $result .= $key;
  } else {
    $result .= '<a href="' . 
             $value. '" class="'.$menuclass.'">' . 
             $key .'</a>';
  }
    $result .= '</div>';
 
  return $result;
}

Code herunterladen

Die Abfrage der aktuell angezeigten Seite erfolgt hier über:

if (basename($_SERVER['PHP_SELF']) == $value)

Damit wird der Dateiname ohne den Pfad für die gerade angezeigte Seite ermittelt. Ist diese dann mit dem Wert in $value identisch, so handelt es sich um die Seite, die im Navigations-Array gerade bearbeitet wird.

Das Stylesheet

Der Vollständigkeit halber soll auch noch das Stylesheet gezeigt werden:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
div.menu {
  font-size: 1.2em;
}
 
div.submenu
{
  font-size: 0.9em;
}
 
div.indent1 {
  margin-left: 10px;
}
 
div.indent2 {
  margin-left: 20px;
}

Code herunterladen

Als Standardschrift wird zunächst die font-family und font-size für body festgelegt. Anschließend werden die Schriftgrößen für die Hauptmenü- und Untermenüpunkte entsprechend festgelegt. Außerdem wird für jede Einrück-Ebene ein entsprechender linker Abstand mit margin-left festgelegt.

Fazit

Das hier gezeigte Beispiel soll nur zur Anschauung dienen, um Anregungen für die Entwicklung einer eigenen Menüfunktion zu geben. Für mehr Einzelheiten und tiefere Einblicke in PHP empfehle ich den Online-Kurs zu PHP: Onlinekurs PHP

Hinweis: Diesen Text und die enthaltenen Beispielprogramme und Skripte dürfen Sie zum Erlernen der einzelnen Techniken und auch als Grundlage für Ihre eigenen Projekte auf eigene Gefahr kostenlos nutzen.

Bitte denken Sie daran, dass alle Texte und Quellcodes trotzdem urheberrechtlich geschützt sind. Eine direkte Weitergabe ist nur nach ausdrücklicher schriftlicher Genehmigung gestattet.

05.02.2006 11:01:14, von Marian

, 1054 Wörter, 41927 mal angeschaut

Kategorien: PHP

3 Kommentare

Kommentare, Pingbacks:

Kommentar von: Jan Schubert [Besucher]

Hallo,

Skript funktioniert.
Da ich mehr oder weniger noch Anfänger bin, fand ich das schon sehr informativ aber was ich bis jetzt nicht verstehe ist warum in der Funktion insert_link als 4. Wert $ebene=0 eingegeben wird. Eigentlich müsste doch dort nur $ebene stehen. Woher weiß dann die Funktion, daß die $ebene auch mal nicht 0 sein kann. Das ist mir ein Rätsel.

Schöne Grüße

Jan

17.02.2006 @ 12:46

Kommentar von: Marian [Mitglied] · http://www.heddesheimer.de

Das ist schon korrekt, eigentlich müsste es nur $ebene heißen. Die Zuweisung macht daraus einen sogenannten optionalen Parameter. Wenn der 4. Parameter beim Aufruf weggelassen wird, dann setzt die Funktion automatisch 0 ein, ansonsten eben den übergebenen Wert.

Das wird übrigens alles sehr ausführlich in meinem PHP-Onlinekurs erklärt.

Gruß
Marian

17.02.2006 @ 12:53

Kommentar von: matthias [Besucher] · http://www.puridesign.com

Moin!
sehr schöne beschreibung für ein dynamisches menü.

ich habe allerdings eine frage, vll kommt diese nur auf weil ich ne ganze weile nichts gecodet habe und nur aufm schlauch stehe, aber vll bin ich auch einfach zu doof:
auf der seite www.puridesign.com ist eine navigation, die bei klick auf "kollektion" unterpunkte öffnet. wie kriege ich diese navigation (nicht mit mouseover sondern mit klick) in php hin, va so, dass es von der formatierung wie bei o.g. seite funktioniert (unterpunkte fangen am ersten punkt des hauptpunktes an).

vielen dank für die hoffentlich kommende antwort.

mfg

matthias

22.02.2008 @ 20:10

Kommentar schreiben:

Name:

eMail:

Ihre E-Mail-Adresse wird nicht angezeigt.

Seite/URL:

Ihre URL wird angezeigt.

Sorry, in letzter Zeit erhalte ich einfach zu viel Spam-Mails von automatischen Programmen. Das Veröffentlichen der Kommentare wird daher zeitlich verzögert und Sie müssen eine Frage beantworten.
Wenn Sie also ein Mensch sind, dann hier bitte als Zahl eingeben: wieviel ist drei mal fünf?:

Antispam-Feld

Kommentartext:

Erlaubte XHTML Tags: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>

Optionen:

Auto-BR (Zeilenumbrüche werden zu <br />)
Meine Daten merken (Setze Cookies für Name, eMail & URL)