Aufklappbares dynamisches Menü erstellen
Eine Webseite besteht in der Regel aus mehreren HTML Seiten. Als Webmaster hat man die Aufgabe dem Nutzer eine einfache Navigation durch das Menü zu ermöglichen. Ein zu großes Menü mit allen Unterseiten kann den User schnell verwirren. Deswegen eignet sich insgesondere bei vielen Unterseiten mit einer hierarchischen Struktur ein dynamisches Menü, welches auch aufklappbar sein sollte.
Wie man ein solches Menü dynamisch generieren kann, da gibt es viele verschiedene Möglichkeiten. Man kann ein solches Navigationsmenü zum Beispiel mit Javascript erstellen, welches clientbasiert im Browser aufklappt und ein erneutes Laden der Webseite nicht vorraussetzt. In diesem Tutorial aber möchte ich an einem Code Beispiel aufzeigen, wie man ein Seitenmenü mit PHP und einer MySQL Datenbank dynamisch aus den einzelnen Datensätzen erzeugen kann.
Um das Hauptmenü zu erstellen sollte jede Seite eine Eltern ID bzw. Besitzer ID haben. In diesem Beispiel ist dies das Feld „OwnerID“. In „OwnerID“ wird die „PageID“ der Eltern-Seite eingetragen. Alle Hauptseiten haben die PageID = 0 und liegen somit in der Hierarchie auf der höchsten Ebene.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php function aufklappbaresMenu($OwnerID, $level) { // außerhalb definierte Datenbank Verbindung in der Funktion nutzen global $con; // Abfrage der aktuellen Webpage ID bzw. Vater/Eltern Page global $currentPage; // die einzelnen Seiten aus der Datenbank laden $sql = "SELECT PageID, Title, OwnerID FROM myPages WHERE OwnerID = '".$OwnerID."' ORDER BY PageID"; $result = mysql_query($sql, $con); // alle Einträge durchgehen und Menü aufbauen while ($row = mysql_fetch_array($result)) { // welche Menüs sollen angezeigt werden? if ($level == 2 OR $currentPage['PageID'] == $row['OwnerID'] OR $row['OwnerID'] == $currentPage['OwnerID']) { echo '<li level_'.$level.'"> <a href="page.php?id='.$row['PageID'].'">'.$row['Title'].'</a> </li>'; } // rekursiv die Funktion nochmal aufrufen, um das Untermenü zu erstellen // falls Kindseiten der aktuellen Seite existieren aufklappbaresMenu($row['PageID'], ($level+1)); } } ?> |
Unsere rekursive Funktion zum Erstellen des aufklappbaren Menüs ist recht einfach gehalten. Aufgerufen wird sie das erste Mal im jeweiligen Bereich auf der HTML Seite wie im Folgenden HTML- und PHP-Code zu sehen. Der erste Parameter gibt die Startebene zum Generieren an. Somit kann zum Beispiel auch ein beliebiges Untermenü aufgerufen werden. Der zweite Parameter ist im Grunde eine Hilfsvariable, unter anderem um mit CSS die Ausrichtung zu formatieren, indem man für den jeweiligen Level bzw. die jeweilige Ebene einen linken Abstand (padding-left) von 5 Pixel, 10 Pixel, usw. festlegt. Bei jedem erneuten rekursiven Aufruf wird der Level erhöht und in dem li-Tag im class-Attribut übergeben.
|
1 2 3 4 5 |
<div id="menu"> <ul> <?php aufklappbaresMenu(0, 1); ?> </ul> </div> |
Wie das Menü speziell aussehen soll kann man mit den Bedingungen im if-Zweig definieren. In diesem Fall werden alle Menüeinträge angezeigt, die entweder im Level 2 sind oder wenn die aktuell aufgerufene Seite die Eltern-Seite des Eintrags ist, oder aber die aktuell aufgerufene Unterseite die selbe Eltern-Seite wie der Menüeintrag hat. Durch Erweiterung oder Weglassen der booleschen Ausdrücke im if-Zweig kann man das Menü individuell gestalten.
Achtung: Bei diesem Beispiel muss beachtet werden, dass bei jedem Aufruf der Funktion ein MySQL Query ausgeführt wird. Bei sehr vielen Menüpunkten werden in kürzester Zeit viele SQL Abfragen an den Server gesendet. Man kann dies verbessern, indem man die Einträge einmal außerhalb der Funktion in ein Array lädt und aus diesem die Einträge ausliest. Hierbei muss man jedoch wiederum das gesamte Array durchsuchen, um alle Seiten mit der richtigen Eltern ID zu finden. Ich hoffe dieses Tutorial ist halbwegs verständlich gewesen und hat ein paar Anregungen gegeben. 😉
Hallo,
tolle Funktion und gut beschrieben, aber
getNavTree($row[‚PageID‘], ($level+1));
muss in
aufklappbaresMenu($row[‚PageID‘], ($level+1));
geändert werden