31.3 Alternativen im Web 

Im World Wide Web gibt es wie angekündigt mehrere unterschiedliche Ansätze zum Thema Navigation mit JavaScript/DHTML. Zum Abschluss dieses Kapitels sollen zwei Vertreter dieses Bereichs gebührende Erwähnung finden. Diese zeichnen sich dadurch aus, dass sie ständig weiterentwickelt werden. Damit ist zu hoffen, dass diese Skripten auch beim Erscheinen neuer Browserversionen stets aktuell und verwendbar bleiben.

31.3.1 Joust 

Unter http://www.ivanpeters.com/index.htm?page=/joust/ (wenn das nicht funktioniert, gehen Sie über die Homepage http://www.ivan-peters.com/) finden Sie Joust, ein System, mit dem eine Menüstruktur, die dem Windows Explorer (oder Derivaten) ähnelt, leicht mit JavaScript abgebildet werden kann. Die Software kann gratis heruntergeladen und eingesetzt werden (lesen Sie aber die Lizenzbedingung).

Um das Skript an Ihre eigenen Bedürfnisse anzupassen, müssen Sie lediglich Ihre Menüstruktur in JavaScript-Code fassen. Jedes Menüelement in Joust hat eine eigene, numerische ID. Bei jedem Element können Sie zudem angeben, welches Element sein Vaterelement ist. So ist eine eindeutige Abbildung der Struktur möglich, und auch Verschachtelungen können mit Joust realisiert werden.

var e = theMenu.addEntry(-1,
                         "Folder",
                         "Browserhersteller englisch",
                         "englisch.html",
                         null);
theMenu.addChild(e,
                 "Document",
                 "Microsoft englisch",
                 "http://www.microsoft.com/",
                 null);
theMenu.addChild(e,
                 "Document",
                 "Mozilla englisch",
                 "http://www.mozilla.com/",
                 null);
theMenu.addChild(e,
                 "Document",
                 "Opera englisch",
                 "http://www.opera.com/",
                 null);
var d = theMenu.addEntry(-1,
                         "Folder",
                         "Browserhersteller deutsch",
                         "deutsch.html",
                         null);
theMenu.addChild(d,
                 "Document",
                 "Microsoft deutsch",

                 "http://www.microsoft.de/",
                 null);
theMenu.addChild(d,
                 "Document",
                 "Firefox deutsch",
                 "http://www.firefox-browser.de/",
                 null);

In der Variablen theMenu steht (zumindest im Standardcode) eine Referenz auf das Menüobjekt. Mit der Methode addEntry() fügen Sie dem Menü einen neuen Punkt auf oberster Ebene hinzu. Der Rückgabewert der Funktion ist der Identifikator des Menüeintrags.

Die Methode addChild() dagegen fügt nicht einen Oberpunkt, sondern einen Unterpunkt hinzu. Deswegen muss als erstes Argument an die Funktion eine Referenz auf das Parent-Objekt¹  übergeben werden, in unserem Beispiel also entweder e für den Oberbegriff »Browserhersteller englisch« oder d für »Browserhersteller deutsch«.

Hier klicken, um das Bild zu Vergrößern

Abbildung 31.4     Auch die Joust-Seite verwendet das Joust-Menü (links).

31.3.2 Weitere Ansätze 

Eine einfache Suche bei jeder Suchmaschine fördert eine unübersichtliche Zahl von DHTML-Menüs zu Tage. Eine spezielle Empfehlung wird an dieser Stelle nicht ausgesprochen, denn ein solches Menü lebt davon, dass es regelmäßig gepflegt und aktualisiert wird, damit möglichst viele (moderne) Browser unterstützt werden. Achten Sie also nicht nur darauf, wie gut das Menü in Ihrem Browser funktioniert, sondern auch darauf, wie das in anderen Browsern aussieht. Auch der Veröffentlichungszyklus des Menüs ist wichtig. Das im vorherigen Abschnitt vorgestellte Joust beispielsweise ist ein Web-Klassiker, hat allerdings seine besten Zeiten eigentlich schon hinter sich. Der Code ist aber so gut geschrieben, dass er immer noch recht gut funktioniert.

Ebenfalls interessant ist es, einen Blick auf die jeweilige serverseitige Technologie zu werfen; manche bieten ebenfalls ein clientseitiges DHTML-Menü an – das serverseitig mit Daten gefüttert wird. Hier zur Illustration das Menü von ASP.NET 2.0. Sie benötigen zunächst eine XML-Datei (Web.sitemap) mit einer Beschreibung der einzelnen Navigationspunkte:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
   <siteMapNode url="Default.aspx" title="Homepage" description="Homepage der Anwendung">
      <siteMapNode url="Produkte.aspx" title="Produkte" description="Unsere Produkte" />
      <siteMapNode url="Kontakt.aspx" title="Kontakt" description="Impressum und Kontaktformular" />
   </siteMapNode>
</siteMap>

Diese Sitemap wird von einem speziellen serverseitigen Steuerelement von ASP.NET 2.0 interpretiert und erstellt daraus ein schönes JavaScript-Menü – weitgehend browserunabhängig. Die Arbeitsersparnis ist natürlich enorm.

<%@ Page Language="JScript" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <title>JavaScript-Menü</title>
</head>
<body>

<form runat="server">
   <asp:Menu
      ID="Menu1"
      runat="server"
      DataSourceID="SiteMapDataSource1">
   </asp:Menu>
   <asp:SiteMapDataSource
      ID="SiteMapDataSource1"
      runat="server" />
</form>
</body>
</html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 31.5     Ein DHTML-Menü mit wenigen Zeilen Markup

¹  Der Anglizismus bleibt hier bestehen. In der deutschsprachigen Literatur wird »parent object« meist mit »Vaterobjekt« übersetzt, das englische Wort »parent« ist jedoch geschlechtsneutral und bedeutet »Elternteil«.