De:Kaskadierende Menüs
From phpCMS
Frage: Wie erstelle ich kaskadierende Menüs
Antwort: Um eine kaskadierende Menü-Struktur darzustellen, muss man das Untermenü vom übergeordneten aktiven (ACTIVE) Menü-Baum aus aufrufen (normalerweise zu finden im Template home.mtpl).
Iggi hat hierzu eine gute Erklärung im phpCMS-Forum geliefert:
(Man beachte, dass das gegebene Beispiel auf dem Demo-Template GilaTwo [1] basiert)
Das phpCMS Menü-System ist sehr flexibel - und daher am Anfang manchmal etwas schwer zu durchschauen.
Zu aller Erst sei gesagt, dass phpCMS keinerlei Namenskonventionen folgt bei der Benennung von (Unter-)Menüs, so dass es keinen Unterschied macht, ob man sein Untermenü nun "SUB2" oder "DASISTMEINUNTERMENUE" nennt. Obendrein ist die Menüstruktur standardmäßig nicht hierarchisch aufgebaut - wenn man hierarchische Menüs haben will, muss man phpCMS mittels der Menü-Templates mitteilen, wie diese Menüs hierarchisch aufzubauen sind.
Standardmäßig ist jedes Menü (zum Beispiel SUB1), welches man in seinen Menü-Templates definiert, unabhängig von allen anderen Menüs. Wenn man nun SUB1 als Untermenü eines anderen Menüs (zum Beispiel des Menüs mit dem Namen MAIN) darstellen will, muss man phpCMS so konfigurieren, dass es das Untermenü immer dann darstellt, wenn der zugehörige Hauptmenü-Eintrag aktiv ist.
Wenn man sich das aktuelle Menü-Template ansieht, so enthält es ungefähr folgendes:
{MAIN.PRE}
<!-- phpCMS MAIN MENU START -->
<div class="subHeader">
<span class="doNotDisplay">Navigation: </span>
{MAIN.NORMAL}
<a href="{LINK}" title="{TEXT}">{MNAME}</a>
{MAIN.AKTIV}
<b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b>
{MAIN.BETWEEN}
|
{MAIN.PAST}
</div>
<!-- phpCMS MAIN MENU END -->
; Sub menu 1
{SUB1.PRE}
<!-- phpCMS SUB MENU 1 START -->
<div class="leftSideBarBox">
<span class="doNotDisplay">Submenu: </span>
<p class="sideBarTitle">Sub pages:</p>
<ul>
{SUB1.NORMAL}
<li><a href="{LINK}" title="{TEXT}">{MNAME}</a></li>
{SUB1.AKTIV}
<li><b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b></li>
{SUB1.PAST}
</ul>
</div>
<!-- phpCMS SUB MENU 1 END -->
Wie man in diesem Beispiel sehen kann, werden beide Menüs unabhängig voneinander dargestellt. Das MAIN-Menü wird horizontal im Kopf der Seite angezeigt, während das Menü SUB1 auf der linken Seite zu sehen ist. Aus diesem Grund werden beide Menüs unabhängig voneinander im Seiten-Template eingefügt. Das Menü MAIN wird irgendwo zu Beginn der Datei header.tpl eingetragen:
{MENU NAME="MAIN"}
und das Menü SUB1 ist unabhängig davon einige Zeilen tiefer beim linken Seitenbalken zu finden:
{MENU NAME="SUB1"}
Was phpCMS nun macht, wenn es auf den erste MENU-Eintrag in der header.tpl stößt, ist folgendes: Es überprüft, welche Menü-Nummer die gerade angezeigte Seite hat (entweder über die Information aus dem {MENU}-Eintrag der Seite oder über einen Vergleich der URL der aktuellen Seite mit denen in der Menü-Liste). Wenn phpCMS somit die Menü-Nummer kennt (zum Beispiel 00.01), sucht es in der Menü-Datei (zum Beispiel main.mnu) mach dem Block mit dem Namen MAIN und dem ersten Eintrag in diesem Menü mit ebendieser Nummer als 'CLASS'. In der Demo 'gila' würde es den folgenden Menü-Block finden:
MENU: MAIN CLASS; MNAME; LINK; TEXT 00.01; Home; $home/index.html; Zur Startseite 00.02; Seite 2; $home/index.html; Zur Seite 2 00.03; Seite 3; $home/index.html; Zur Seite 3 00.04; Seite 4; $home/index.html; Zur Seite 4
da dies der erste Block mit dem richtigen Namen (MAIN) ist, und die erste Reihe dieses Blocks die passende Menü-Klasse (00.01) hat, die ja von der aktuellen Seite angegeben wurde.
Im nächsten Schritt sucht phpCMS nun nach einem Menü-Template, welches den selben Namen trägt wie das Menü (in diesem Fall also MAIN) und benutzt dieses Template zur Darstellung der Menü-Einträge.
Wenn man das weiss, ist es nicht schwer zu erraten, was phpCMS macht, wenn es auf die Zeile
{MENU NAME="SUB1"}
trifft. Es bestimmt die Menü-Klasse der aktuellen Seite (immer noch 00.01), und sucht dann in der Menü-Datei nach dem ersten Blcok des Namens SUB1, bei dem das erste Element des Blocks eine Klasse hat, die mit 00.01 beginnt.
Im unserem Fall findet phpCMS den Block
MENU: SUB1 CLASS; MNAME; LINK; TEXT 00.01.01; Unterseite 1/1; $home/index_sub1.html; Zur Unterseite 1 der Startseite 00.01.02; Unterseite 1/2; $home/index.html; Zur Unterseite 2 der Startseite
welcher beiden Anforderungen genügt. Hätten wir zusätzlich den Block
MENU: SUB1 CLASS; MNAME; LINK; TEXT 00.02.01; Unterseite 2/1; $home/index_sub2_1.html; Zur Unterseite 1 der Seite 2 00.02.02; Unterseite 2/2; $home/index_sub2_2.html; Zur Unterseite 2 der Seite 2
so würde dieser nicht genutzt, da er nicht beide Anforderungen erfüllt. Natürlich stimmt der Name des Blockes (SUB1), aber die Menü-Klasse des ersten Elements beginnt nicht mit "00.01".
Zurück zu unserem Problem. Wenn man sich klar macht, was ich bisher geschrieben habe, gibt es nun 2 Möglichkeiten, das Untermenü SUB2 anzuzeigen (vermutlich gibt es noch jede Menge mehr, aber nur 2 übliche Wege).
Zum einen kann man das Menü SUB2 ebenfalls unabhängig von den übrigen Menüs einbinden - wie zum Beispiel auf der Seite http://phpcms.de/about/features.de.html, wo das Hauptmenü horizontal angeordnet ist, und auf der linken Seite 2 Hierarchie-Ebenen in separaten Boxen dargestellt werden.
Dies ist der einfache Weg, bei dem man lediglich neue Menü-Blücke in der Menü-Datei (z.B. main.mnu) definieren nuss, wie zum Beispiel:
Code:
MENU: SUB2 CLASS; MNAME; LINK; TEXT 00.01.01.01; Unterseite 1/1/1; $home/index_sub111.html; Seite 1.1.1 00.01.01.02; Unterseite 1/1/2; $home/index_sub112.html; Seite 1.1.2
Dieser Block definiert die zwei Unterseiten der Seite 01.01.01 aus dem Menü-Block SUB1 (siehe oben). Ich habe einfach .01 und .02 an die Menü-Klasse angehängt.
Natürlich muss man auch im Menü-Template definieren, wie dieses Menü SUB2 aussehen soll. Zum Schluss muss man noch die Zeile
{MENU NAME="SUB2"}
in das Seitenlayout aufnehmen an der Stelle, wo das Untermenü angezeigt werden soll.
Nun bleibt uns noch die Methode zwei, die etwas komplizierter ist. In vielen Fällen möchte man eine Art hierarchisches Menü haben, wo die Untermenüs nur ausgefaltet werden, wenn der zugehörige Haupt-Menüpunkt aktiviert ist. Als Beispiel verweise ich hier auf www.drachenreiter.de.
Auf der linken Seite sieht man im Menü die Einträge der höchsten Stufe (z.B. MAIN), und lediglich der derzeit aktive Menüeintrag ist 'ausgeklappt' und seine Untermenü-Einträge angezeigt. Alle übrigen Untermenü-Eintrage sind 'verstecke'.
Wenn man nun auf den Menüpunkt 'Galladorn' klickt, kann man sehen, wie sich das Menü ändert: Nun sind die Unter-Einträge von 'Galladorn' sichtbar, während die bislang sichtbaren Unterpunkte verschwunden sind.
Wenn man nun auf einen solchen Untermenü-Eintrag klickt (zum Beispiel auf 'Who is Who'), so öffnet sich dieser, und die Untermenü-Einträge der Stufe 2 werden angezeigt.
Wenn wir ein solches Menü erstellen wollen, müssen wir uns erst einmal klar werden, was das genau bedeutet:
1) Das Menü MAIN, unser Hauptmenü, soll immer sichtbar sein. 2) Das Untermenü SUB1 (erste Unterebene) soll nur dann sichtbar sein, wenn der zugehörige Eintrag aus dem Hauptmenü aktiv ist 2) Das Untermenü SUB2 (zweite Unterebene) soll nur dann sichtbar sein, wenn der zugehörige Eintrag aus der ersten Unterebene aktiv ist
Die Bedingung #1 ist einfach zu lösen - wir setzen lediglich das bekannte
{MENU NAME="MAIN"}
in die Seitenvorlage ein - nichts dabei.
Nun wird es etwas komplizierter - das Untermenü SUB1 soll nur dann angezeigt werden, wenn der zueghörige Hauptmenü-Eintrag aktiv ist. Wir können daher den Aufruf {MENU NAME="SUB1"} nicht in unsere Seitenvorlage schreiben. Stattdessen rufen wir dieses Menü in der '.ACTIVE' - Definition der Menü-Vorlage für das Menü MAIN auf (und das ist auch schon der ganze Trick).
Unsere Menü-Vorlage für MAIN sieht also wie folgt aus:
{MAIN.PRE}
<!-- phpCMS MAIN MENU START -->
<div class="subHeader">
<span class="doNotDisplay">Navigation: </span>
{MAIN.NORMAL}
<a href="{LINK}" title="{TEXT}">{MNAME}</a>
{MAIN.AKTIV}
<b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b>
{MENU NAME="SUB1"}
{MAIN.BETWEEN}
|
{MAIN.PAST}
</div>
<!-- phpCMS MAIN MENU END -->
Die wichtige Zeile ist hierbei der Aufruf von {MENU NAME="SUB1"} im Abschnitt {MAIN.AKTIV}. Es wird übrigens empfohlen, statt MAIN:AKTIV lieber MAIN.ACTIVE zu verwenden - die deutsche Version ist als "veraltet" anzusehen. Beide Versionen funktionieren (derzeit), aber im Zuge der Internationalisierung wurde das Schlüsselwort 'AKTIV' vor einiger Zeit in 'ACTIVE' geändert.
Wenn man diesen Trick kennt, ist es nicht schwer, wirklich hierarchisch aufgebaute Menüs mit beliebig vielen Ebenen zu bauen. Man muss lediglich den Aufruf für die nächste Menü-Ebene im '.ACTIVE' - Teil der Vorlage der aktuellen Ebene eintragen
Main Page: Tutorials MainPage | Top Page: De:MiniHowTos
This page in other languages: English
