Startseite --> Hilfen & Technische Artikel --> Dynamisches Navigations-Menü

Dynamisches Navigations-Menü

 Einleitung
 Die ganz einfache Variante
 Kleine Bildchen vor den Menüs verändern
 Bemerkung

Einleitung

Explorer-MenüWer eine Homepage gestaltet, wird bestimmt schon mal mit dem Gedanken gespielt haben, eine explorerähnliche Navigationsleiste zu erstellen, also eine, die die zusammenklappbare Baumstruktur im zweispaltigen Windows-Explorer nachahmt.
So eine Navigation zu realisieren ist einfacher, als es sich anhört. Häufig findet man auf Web-Seiten umständliche JavaScript-Blöcke, die mit den alten DHTML-Modellen von Microsoft (document.all) und Netscape (Layer-Technik) arbeiten. Ich habe sogar mal in einem JavaScript-Buch eine Lösung gesehen, die irgendwie die Auf- und Zuklapp-Effekte mit Hilfe der Position von Elementen realisiert. Aber das hat nicht funktionert.

Dieser Artikel stellt eine einfache JavaScript-Lösung vor, die mit dem DOM (Document Object Model) zusammenarbeitet, in den beiden großen Browsern (also IE und Netscape/Mozilla) funktioniert und mit den meisten Situationen fertig wird.
Entstanden ist sie, als ich die Navigation für die Online-Version der Tyrann-Datensammlung entwickelte. Hierzu ließ ich mich von einem Script auf der alten Homepage von Florian Volk inspirieren (und er ließ sich von Microsoft inspirieren ;-) ). Die Technik war einfach: Die eingeklappten Bereiche wurden mit CSS "unsichtbar" gemacht (display:none) und mit einer ID gekennzeichnet. Anschließend gab es da einen Link, der eine JavaScript-Funktion aufruft und ihr die ID des auf- bzw. zuzuklappenden Bereiches übergibt. Die Funktion prüfte zunächst, ob der Bereich nicht schon aufgeklappt war. Wenn nein, wird er aufgeklappt (display:block). Wenn er aufgeklappt war, wird er ganz einfach zugeklappt.
Das Script funktionierte allerdings nur im Internet Explorer. Ich entwickelte eine neue Variante, die eben über das DOM auf die einzelnen Abschnitte zugreift und deswegen auch in Netscape/Mozilla funktioniert.

Ein Hinweis noch: Sie sollten für alle Fälle noch eine alternative Navigation anbieten, die ohne JavaScript funktioniert. Es gibt eben Benutzer, die JavaScript deaktiviert haben, oder bei denen JavaScript veraltet ist (es wird mindestens JavaScript 1.5 verlangt) und deswegen mit der hier vorgestellten Lösung nicht zurechtkommen.

 Nach oben  Nach unten

Die ganz einfache Variante

Ich stelle zuerst die ganz einfache Variante vor. Sie erlaubt es, bestimmte Bereiche auf- und zuzuklappen.

Das wichtigste ist die folgende JavaScript-Funktion:

function outline(id)
{
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
 }
}

Die Funktion kann einen Parameter entgegennehmen. Und zwar die ID des Bereichs, der auf- bzw. zugeklappt werden soll. Anschließend greift es auf den Bereich mit dieser ID zu (document.getElementById) und prüft, ob er zugeklappt ist. Dazu prüft es ganz einfach, ob style.display (der Wert der CSS-Eigenschaft display) den Wert none hat. Wenn das zutrifft, wird der Bereich sichtbar gemacht, d.h. style.display des Bereiches wird auf block gesetzt.
Wenn der Bereich nicht aufgeklappt ist (style.display ist etwas anderes als none), dann wird style.display auf none geschaltet und schon ist der Bereich zugeklappt. Das ist das ganze Prinzip hinter so einer Navigation.

Und wie baut man das alles in eine Navigation ein? Erstmal ist es wichtig, dass das Script oben als JavaScript gekennzeichnet wird. Dazu setzt man es einfach in <script>-Tags (sollten sich zwischen <head> und </head> befinden) und fügt language="JavaScript" type="text/javascript" hinzu (oder man bindet eine externe Datei ein).
Anschließend suchen Sie die Stelle auf, an die die Navigation hin soll. Dort fügen Sie am besten zuerst einen Link ein, mit dem sich das Menü auf- und zuklappen lässt:

<a href="#" onclick="outline('ID'); return false;">Linktext</a>

Ersetzen Sie dann ID durch die ID des entsprechenden Bereiches.
Hier sehen Sie die sichere Variante eines solchen Links. Im Grunde genommen reicht es, wenn Sie einen JavaScript-Link anlegen, der die Funktion outline() aufruft und ihr die entsprechende ID übergibt. Allerdings erzeugt diese einen Fehler, wenn der Browser kein JavaScript unterstützt, was bei der sicheren Variante nicht passiert.

Jetzt kommt das wichtige: Das Anlegen der auf- und zuklappbaren Bereiche. Dazu kommt das Universal-Inline-Element <span> zum Einsatz. Es umschließt den kompletten Bereich der auf- und zugeklappt werden soll. Das <span>-Tag erhält nun zwei Attribute, nämlich id und style. Dem Attribut id weisen Sie die ID des Bereiches zu, die dann der Funktion outline() übergeben wird. Dem Attribut style weisen Sie den Wert display:none zu. Dadurch wird der Bereich unsichtbar. Und das war's auch schon!

Wie Sie die Einrückungen realisieren, bleibt Ihnen überlassen. Sie können dazu beispielsweise Listen oder geschützte Leerzeichen (&nbsp;) verwenden.

Und so kann das alles vom Quelltext her komplett aussehen:

<p><a href="#" onclick="outline('ID'); return false;">Überschrift</a><br>
<span id="ID" style="display:none">&nbsp;&nbsp;&nbsp;Link 1<br>
&nbsp;&nbsp;&nbsp;Link 2<br>
&nbsp;&nbsp;&nbsp;Link 3</span></p>

Natürlich ist es auch möglich, Menüs zu verschachteln:

<p><a href="#" onclick="outline('ID'); return false;">Überschrift</a><br>
<span id="ID" style="display:none">&nbsp;&nbsp;&nbsp;<a href="#" onclick="outline('ID_Unterkategorie'); return false;">Unterkategorie</a><br>
<span id="ID_Unterkategorie" style="display:none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Link 1<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Link 2</span>
&nbsp;&nbsp;&nbsp;Link 2<br>
&nbsp;&nbsp;&nbsp;Link 3</span></p>

Diese Prozudur machen Sie jetzt mit allen Bereichen, die der Besucher auf- und zuklappen kann.

Und hier ist ein funktionierendes Beispiel:
 Beispiel

 Nach oben  Nach unten

Kleine Bildchen vor den Menüs verändern

Das war doch schon mal ganz gut. Doch die Baumstruktur im zweispaltigen Explorer kann etwas, was unsere Funktion nicht kann: Vor jedem Verzeichnis ist ein Plus-Zeichen, das beim Aufklappen des Verzeichnisses durch ein Minus ersetzt wird. Und beim Zuklappen wird dieses Minus wieder zu einem Plus.
Auch das lässt sich kinderleicht realisieren. Hier ist erstmal die Funktion:

function outline(id)
{
 var img = id + '_img';
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'auf.gif';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'zu.gif';
 }
}

Diese Funktion macht im Grunde genommen das selbe, wie die etwas weiter oben. Allerdings hängt sie gleich zu Beginn ein _img an die übergebende ID an. Diese neue ID ist die ID des Bildes, das beim Auf- und Zuklappen des entsprechenden Bereiches verändert werden soll.
Anschließend prüft es, ob der entsprechende Bereich zugeklappt ist, klappt ihn ggf. aus (s.o.), holt sich anschließend das Bild mit der zuvor ermittelten ID und tauscht es gegen ein anderes aus (in diesem Falle auf.gif). Wenn der Bereich nicht zugeklappt ist, wird er eben zugeklappt und das Bild wird mit der ermittelten ID wird ausgetauscht (in diesem Falle zu.gif).

Beim Anlegen der auf- und zuklappbaren Bereiche gehen Sie genauso wie oben vor. Allerdings benötigen Sie noch ein Bild, das beim Auf- und Zuklappen verändert werden soll. Dieses Bild benötigt auch noch eine ID. Die lautet genauso, wie die des auf- und zuklappbaren Bereiches, nur dass Sie noch ein _img anhängen müssen.

Beachten Sie bitte, dass die Bilder die gleiche Größe haben müssen. Wenn sie unterschiedliche Größen haben, müssen Sie die Funktion so anpassen, dass sie die Größen gleich mit verändert.
Wenn Sie andere Bildernamen als auf.gif und zu.gif verwenden wollen, müssen Sie die Funktion entsprechend verändern.

Ein Beispiel für diese Variante finden Sie in der Online-Version der Tyrann-Datensammlung (das Script befindet sich aber in einer externen Datei namens trndats.js).

 Nach oben  Nach unten

Bemerkung

Wenn Sie die oben genannte Funktionen nutzen möchten, um Tabellenzeilen auszublenden, verursacht der Mozilla Firefox Probleme beim Wiedereinblenden der Zeile. Das lässt sich beheben, indem Sie document.getElementById(id).style.display = 'block'; durch document.getElementById(id).style.display = ''; ersetzen. Sie können auch document.getElementById(id).style.display = 'table-row'; verwenden, allerdings funktioniert das Script dann im Internet Explorer nicht mehr.

Danke an Andreas Fey für den Hinweis!

Startseite --> Hilfen & Technische Artikel --> Dynamisches Navigations-Menü