SSI: Aufklappmenüs

von Arne Pottharst

Eine normale Navigationsleiste einzubinden, die auf jeder Seite erscheinen soll, ist mit einem einzigen SSI-Befehl rasch erledigt. Doch aufklappbare Untermenüs? Mit ein wenig Bastelarbeit entsteht eine echte "Dateimanager"-Navigation.

Der Grundgedanke ist folgender: jede Rubrik bekommt einen Namen (z.B. r1, r2, r3 etc.), Unterrubriken ebenfalls (z.B. ur1, ur2, ur3 etc.). Nun werden zum Auf- oder Zuklappen einer Rubrik die entsprechenden Namen übergeben und das Navigationsmenü abhängig davon neu aufgebaut. Die Übergabe geschieht per QUERY_STRING, dieser enthält alles, was in der URL hinter dem ? (Fragezeichen) steht. Die Live Demo (funktioniert nur online) verdeutlicht das.

Zuerst wird der aktuelle QUERY_STRING zerlegt und in Variablen gespeichert. Hierzu werden eine if-Abfrage sowie der set-Befehl verwendet:

1: <!--#if expr="$QUERY_STRING = /r1/" -->
2:   <!--#set var="r1" value="r1" -->
3: <!--#else -->
4:   <!--#set var="r1" value="" -->
5: <!--#endif -->

Die if-Abfrage (1,3,5) überprüft, ob in QUERY_STRING der Ausdruck r1 vorkommt. Durch Verwendung der Schrägstriche /r1/ wird irgendein Vorkommen an irgendeiner Stelle gesucht ("regulärer Ausdruck").

Der set-Befehl (2,4) weist der Variablen r1 je nach Ausgang der Überprüfung den Wert "r1" (2) oder aber einen leeren Wert (4) zu.

Hinweis: Diese Überprüfung muss für alle Rubriken und eventuelle Unterrubriken stattfinden.

Für die Navigation müssen für jede Rubrik zwei Alternativen erstellt werden: eine in ausgeklapptem und eine in eingeklapptem Zustand.

1: <!--#if expr="$QUERY_STRING = /r1/" -->
2:   <a href="<!--#echo var="DOCUMENT_URI"-->?
     _ <!--#echo var="r2" --><!--#echo var="r3" -->">
     _ Rubrik 1</a><br>
3:   &nbsp; |-- Unterpunkt 1<br>
4:   &nbsp; |-- Unterpunkt 2<br>
5:   &nbsp; \-- Unterpunkt 3<br>
6: <!--#else -->
7:   <a href="<!--#echo var="DOCUMENT_URI"-->?
     _ r1<!--#echo var="r2" --><!--#echo var="r3" -->">
     _ Rubrik 1</a><br>
8: <!--#endif -->

Achtung: Zeilen, die mit einem _ (Unterstrich) beginnen, wurden umgebrochen. Bitte _ (Unterstrich), Umbruch und Zeilennummern entfernen!

Das ganze sieht komplizierter aus, als es in Wirklichkeit ist. Hier die Erklärung Zeile für Zeile:

1: Die if-Abfrage überprüft, ob der QUERY_STRING die Zeichenfolge "r1" enthält, so wie oben schon. Ist dies der Fall, wird im Folgenden (2-5) das ausgeklappte Menü ausgegeben.

2: Als Link wird per <!--#echo var="DOCUMENT_URI"--> der Name der aktuellen Seite ausgegeben, das ist ganz nützlich, wenn man das Menü auf verschiedenen Seiten einbindet. Zusätzlich wird hinter dem ? (Fragezeichen) der neue QUERY_STRING gebildet. Dieser setzt sich aus den zuvor gespeicherten Variablen zusammen. Achtung: es müssen alle Variablen außer der der aktuellen Rubrik (in diesem Falle r1) aufgeführt werden, bei umfangreicher Navigationsstruktur können das ziemlich viele sein ...

3-5: Hier werden die Unterpunkte ausgegeben. Diese müssen noch mit Links zu entsprechenden Seiten versehen werden, im Beispiel wurde zu Gunsten der Übersicht darauf verzichtet.

6: Falls die Bedingung aus (1) nicht eingetreten ist, wird das eingeklappte Menü (7) ausgegeben.

7: Wie (2), aber mit dem Unterschied, dass der QUERY_STRING zusätzlich den Namen des aktuellen Menüs enthält, da dieses ja beim Klicken aufgeklappt dargestellt werden soll.

8: Ende der Abfrage.

Diese beiden Blöcke müssen für jede Rubrik erstellt werden. Natürlich sind auch Unterrubriken möglich, die Navigation kann beliebig tief verschachtelt werden, solange alle Regeln eingehalten werden.

Um die Navigation auf jeder Seite einzubinden, muss sie in einer Datei mit der Endung .shtml gespeichert werden, da sie SSI-Befehle enthält. Diese würden sonst möglicherweise nicht ausgeführt werden. Die Einbindung erfolgt per

<!--#include virtual="navigation.shtml" -->

Alternativ kann die Navigation auch in einem Frame untergebracht werden, hier hat man den Vorteil, dass nicht jedesmal die komplette Datei geladen werden muss.

Textdemo
Grafikdemo ("Windows-Explorer")
Download (Text+Grafik-Demo)