Webnavigation mit JavaScript

(nach meinem Artikel "In den Tiefen der Websites" in PC Magazin 4/2005 S. 192ff.)

Warum?

Download Beispielweb

Heutige Benutzer sind mit Navigationsmitteln vertraut, die solche Strukturen in Menüleisten abbilden.

Hier können Sie dieses Beispielweb ausprobieren.

Für die Gestaltung solcher Menüs gibt es die unterschiedlichsten oft recht aufwendigen Möglichkeiten. Wenn die Webseite einen gewissen Umfang erreicht, stellt sich die Frage: Wie baue ich die Navigation so, daß sie konsistent und stimmig bleibt auch wenn Seiten herausgenommen oder zugefügt oder inhaltlich anders eingeordnet werden. Eine neu hinzukommende Seite bedeutet beispielsweise, daß in den Menüs etlicher anderer Seiten ein neuer Punkt erscheinen muß. Sie finden hier eine Lösung, die sowohl das Gestalten der Menüs als auch die Webstruktur als auch den Inhalt der einzelnen Seiten getrennt zu pflegen ermöglicht.
 

Wie soll?s funktionieren?

Auf jeder Seite wird durch den Aufruf nur einer JavaScriptfunktion dafür gesorgt, daß ein immer gleich aussehendes Menü mit den jeweils passenden Einträgen angezeigt wird. Die Menüpunkte sind dabei anklickbar, außer dem der jeweils aktuellen Seite. Für Surfer, die Java­Script nicht nutzen können oder wollen, wird eine Ausweichvariante angeboten.

Wie ein Menü genau aussehen soll, kann in der entsprechenden JavaScriptfunktion bestimmt werden. Ob waagerechte oder senkrechte Navigation, reiner Text oder Verwendung von Bildern, Tabellenform oder Layer ? alles ist mit etwas Fleiß möglich (s. folgende Abb. 2). Selbst Flashmenüs können verwendet werden, wenn die Parameterübergabe in Textform erfolgt.

Und selbstverständlich kann das Aussehen der Elemente über CSS, beispielsweise eine zentrale StyleSheetdatei, vorgenommen werden. Diese ist bei Bedarf schnell geändert. Auch die gerade von Ihnen betrachtete Seite www.computer-schroeder.de wurde nach diesem System (weiterentwickelte Form) konstruiert. Ein weiteres Beispiel mit aufwendiger senkrechter Navigationsleiste zeigt www.hotel-stadttor.de.

Die Webstruktur

Alle für die Navigation wichtigen Seiten bekommen eine Nummer. Nichtnumerierte Seiten zeigen zwar auch Menüs, können aber nur über interne Links erreicht werden (Beispiel: Sitemap; Ausnahme: die Einstiegsseite). Numerieren Sie nach folgenden Regeln:

·       Die Einstiegsseite index.htm wird nicht numeriert. Sie bekommt in jedem Menü einen Sonderlink.

·       In jeder Menüzeile werden mehrere gleichrangige Seiten zur Auswahl angeboten. Diese bekommen Nummern einer Zehnergruppe (z. B. 20 bis 29).

·       Das Menü mit Nr. 1 bis 9 soll das (z. B. auf der Homepage angezeigte) Hauptmenü sein.

Zehn Menüeinträge je Menüzeile sind sicher mehr als ausreichend. In unserem Beispielweb sind maximal 100 Einträge vorgesehen. Dieses Modell würde für Websites mit mehreren Dutzend HTML-Dateien genügen. Mehr Indexeinträge sind kein Problem. Lücken in der Numerierung sind erlaubt.

Es wäre eine gute Idee, die Seitennummer auch im Namen der Datei wiederkehren zu lassen, also beispielsweise 12.htm. ?Sprechende? Namen werden jedoch von Suchmaschinen durch eine bessere Positionierung belohnt.
 

Die Struktur-
datenbank

Gespeichert werden je Seite folgende Informationen:

l[i]:
Welchen Namen und Pfad hat die HTML-Datei? Die Typangabe .htm wird hier weggelassen und vom Script zugefügt. Beispiele sind: info oder ordner/info.
(Merkhilfe: ?Link?)

a[i]:
Wie soll der Texteintrag im Menü aussehen? Beispielsweise kann im Menü ?Infos? stehen. (Merkhilfe: ?Anker?)

v[i]:
Ein beschreibender Text, der bei Berührung durch den Mauszeiger in der Statusleiste und als Tiptext angezeigt wird. (Merkhilfe: ?over?)
Kein Eintrag (also v[i]==??) bedeutet: unbenutzt, frei.

Denkbar wären weitere Arrays, beispielsweise für zugehörige Bilddateien. Wenn es sich um Textdaten handelt, werden diese in Anführungszeichen gesetzt.

[i] wie ?Index? ist die Nummer im Array, also a[1] bis a[100] usw. Ein Index 0 ist nicht möglich, deshalb wird das Menü ab [1] nur neun Einträge haben.

Die Indexnummer entspricht der geplanten Nr. aus unserer Webstruktur.

Beispielsweise bedeutet
    a[12]=?Shop?,
daß der Punkt 1 (?Angebote?) des Hauptmenüs gerufen wurde und in dessen Untermenü der Menüpunkt 2 mit dem Wort ?Shop? angezeigt wird. Bei Klick darauf erfolgt gemäß
    l[12]=?waren?
die Anzeige der Seite waren.htm.

Das folgende Listing 1 zeigt Aufbau und Inhalt der ?Datenbank?-Datei db.js für das Beispielweb mit den Anweisungen für:

• Definition der Arrays
• Vorläufige Eintragung leerer Werte in alle Zellen - sorgt bei Fehlnumerierung für fehlerfreie Abarbeitung.
• Zuweisung der jeweils drei Werte je Webseite. Dabei ist die Wahl der korrekten Nummern von entscheidender Bedeutung.

Listing 1: Datei db.js ? Die Menü-?Datenbank?

1. // Die Datenbanktabellen (Arrays) definieren
2. // ===========================================
3.  
4. l = new Array();
5.   a = new Array();
6.     v = new Array();
7.  
8. /*   Erlaeuterungen: je Menue bis zu zehn Eintraege
9. l    ?Link?  : Dateiname ohne .htm  z.B. "info";  "../ordner/info"
10. a    ?Anker? : Text im Menue        z. B. "Infos"
11. v    ?oVer?  : fuer Statuszeilentext, onmouseover usw.
12.      (v[i]=??: heißt: diese Nr. ist nicht als Menüpunkt genutzt)
13. */
14.  
15.  
16. // Die Arrays mit leeren Anfangswerten füllen
17. // ===========================================
18. for(i = 1; i < 100; i++) // (hier: max. 100)
19. {
20.      a[i]="";
21.      l[i]="";
22.      v[i]="";
23. }
24.  
25. // Die aktuell vorhandenen Webseiten eintragen
26. // ===========================================
27.  
28. // Erster Hauptmenüpunkt ---------------------
29. l[1]="angebot";
30.   a[1]="Angebote";
31.     v[1]="Was dürfen Sie bei uns erwarten?";
32. // die zugehörigen Untermenüeinträge
33. l[12]="waren";
34.   a[12]="Shop";
35.     v[12]="Besuchen Sie unseren Shop";
36. l[15]="leistungen";
37.   a[15]="Dienstleistungen";
38.     v[15]="Wir erfüllen auch besondere Anforderungen";
39.  
40. // nächster Hauptmenüpunkt ---------------------
41. l[4]="info";
42.   a[4]="Info's";
43.     v[4]="Informationen über unser Unternehmen";
44. // die zugehörigen Untermenüeinträge
45. l[41]="geschichte";
46.   a[41]="Firmengeschichte";
47.     v[41]="Wie fing alles an?";
48.  
49. // letzter Hauptmenüpunkt ---------------------
50. l[8]="kontakt";
51.   a[8]="Impressum";
52.     v[8]="Wie sind wir zu erreichen?";

Menüdesign

Für die Gestaltung von Menüs gibt es zahllose Möglichkeiten. Wollen Sie eine andere Menüform verwenden, dann entwerfen Sie eine Musterseite mit vollständigem Beispielmenü mit einem Werkzeug Ihrer Wahl. Wichtig ist, daß alle relevanten Informationen in Textform im HTML-Quellcode lesbar sind.

Listing 7 zeigt kommentierte Ausschnitte aus dem HTML-Code des Musters. Analysieren Sie diesen Code und grenzen genau folgende Teile ab:

·       Beginn (a) und Ende (n) des Gesamtmenüs

·       Beginn (b, h) und Ende (g, m) jeder Menüzeile

·       Beginn (c, e,? i, k?) und Ende (d,?f, j,? l ) jedes Menüpunkts

Diese Codeteile werden mittels JavaScript in den jeweiligen Prozeduren erzeugt.

Entscheiden Sie des weiteren für jedes Zeichen, ob es in jedem Menü konstant vorkommt oder ob es vom jeweiligen Seiteninhalt abhängig ist. Konstante Zeichenfolgen werden in den weiter unten vorgestellten Funktionen direkt angegeben, letztere müssen über die Parameter aus der JavaScript-Datenbank konstruiert werden.

Listing 7: So sieht der Menücode in HTML aus (Ausschnitt)

1. <!-- Das Menü beginnt mit dem anklickbaren Logobild: (a) -->
2.     <a href="index.htm" target="_self"
3.        onmouseover="window.status='Zur Startseite';return true"
4.        onmouseout="window.status='';return true"
5.        onFocus="if(this.blur)this.blur()">
6.     <img src="logo.gif" alt="Zurück zur Startseite"
7.        align="left" border="0" width="32" height="32"></a>
8.  
9. <!-- // Beginn der ersten Menüzeile // (b) -->
10. <!--  Beginn Menüpunkt (c) -->
11.     <span class="btn">&nbsp;
12.          <a  href="angebot.htm" 
13.              title="Was dürfen Sie bei uns erwarten?"
14.        target="_self"
15.        onmouseover="window.status=
16.                    'Was dürfen Sie bei uns erwarten?';return true"
17.        onmouseout="window.status='';return true"
18.        onFocus="if(this.blur)this.blur()">Angebote</a>
19.     &nbsp;</span>
20. <!--  Ende Menüpunkt (d) -->
21.  
22. <!--  Beginn weitere Menüpunkte (e) -->
23. ...
24. <!--  Ende letzter Menüpunkt (f) -->
25. <!-- // Ende der ersten Menüzeile // (g) -->
26.  
27. <br>
28.  
29. <!-- // Beginn der zweiten Menüzeile // (h) -->
30. <!--  Beginn Menüpunkt (i) -->
31.     <span class="btlt">&nbsp;
32.          <a  href="waren.htm"  title="Besuchen Sie unseren Shop"
33.        target="_self"
34.        onmouseover="window.status=
35.                    'Besuchen Sie unseren Shop';return true"
36.        onmouseout="window.status='';return true"
37.        onFocus="if(this.blur)this.blur()">Shop</a>
38.     &nbsp;</span>
39. <!--  Ende Menüpunkt (j) -->
40.  
41. <!--  Beginn weitere Menüpunkte (k) -->
42. ...
43. <!--  Ende letzter Menüpunkt (l) -->
44. <!-- // Ende der zweiten Menüzeile // (m) -->
45.  
46. <br><hr><br>
47. <!-- Das Menü endet mit der Anzeige einer Trennlinie (n) -->

Die Menü-
programmierung

Die Funktion NavZeile2 ähnelt NavZeile1. Vielleicht wollen Sie als konstanten Teil die Anzeige eines E-Mail-Links in der ersten Menüzeile anfügen?

Listing 2:  Datei code.js - Funktion ?Navigationsteil?

1. function Navigationsteil(start1, von1, start2, von2)
2. {
3. // Parameter: Indexnummern, die auf die DB-Tabellen zeigen
4. // start1: Indexnr., ab welcher der 1. Punkt des Hauptmenüs steht
5. // von1: Indexnr., die dem abgebildeten Untermenü entspricht
6. // (dieser Hauptmenüpunkt wird nicht anklickbar dargestellt)
7. // start2: Indexnr., ab welcher der 1. des Untermenüs steht
8. // von2: Indexnr., die dem abgebildeten Untermenüpunkt entspricht
9. // (dieser Menüpunkt wird nicht anklickbar dargestellt)
10.    var g
11. // hierin wird der gesamte HTML-Code des Navigationsteils gesammelt
12. // Beispiel: Beginn mit Link zur Homepage über ein Logobild
13.    g='<a href="index.htm" target="_self"
14.    onmouseover="window.status='+"'Zur Startseite'"+';return true"
15.    onmouseout="window.status='+"''"+';return true"
16.    onFocus="if(this.blur)this.blur()">';
17.    g+='<img src="logo.gif" alt="Zur&uuml;ck zur Startseite"';
18.    g+=' align="left" border="0" width="32" height="32"></a>';
19. // Das Hauptmenü erzeugen
20.    g+=NavZeile1(start1, von1);
21.    g+='<br>';
22. // Untermenü erzeugen falls erforderlich (0: entfällt)
23.    if(start2>0) g+=NavZeile2(start2, von2);
24.    g+='<br><hr><br>';
25. // Der Navigationscode ist fertig
26.    document.write(g);
27. }

 Ein Menüpunkt

Listing 4 zeigt, daß zwecks Formatierung der gesamte Menüpunkt in ein <span>-Tag eingeschlossen ist. Alle je nach Parameterwert erforderlichen HTML-Teile werden in einer Variablen z gesammelt und am Ende komplett zurückgegeben.

Listing 4: Datei code.js - Ein Menüpunkt wird erzeugt

1. function NavZelle(anzeig, link, onov, cl)
2. {
3. // anzeig:    der anzuzeigende Text
4. // link:      Dateiname (ev. mit Pfad), wird bei Klick geöffnet
5. // onov:      Text, der bei mouseover angezeigt wird
6. //            (wenn leer, dann zumindest kein <a>-Tag)
7. // cl:        CSS-Klassenname, für Aussehen des Menüpunkts
8.  
9.  
10. var z // hierin wird der Code gesammelt
11. var h // Hilfsvariable
12.  
13. //  Codebeginn je Menüpunkt (HTML)
14.     z='<span class="'+cl+'">&nbsp;';
15.  
16. //  Dies nur, wenn ein Eintrag vorhanden ist
17.     h=(onov=="")?'':('<a  href="'+link+'.htm"
18.        title="'+onov+'" target="_self"
19.        onmouseover="window.status='+"'"+onov+"'"+';return true"
20.        onmouseout="window.status='+"''"+';return true"
21.        onFocus="if(this.blur)this.blur()">');
22.     z+=h; // ... und weiteres (Bild?) dazwischen möglich
23.     h=(onov=="")?"":"</a>";
24.     z+=anzeig+h;
25.  
26. //  Codeende je Menüpunkt (HTML)
27.     z+='&nbsp;</span>';
28.  
29. return z; // z enthält alles, was für einen Menüpunkt benötigt wird
30. }

Eine Menüzeile

Es wird zehnmal geprüft, ob der jeweilige Menüpunkt existiert, und wenn ja wird NavZelle aufgerufen, um dessen HTML-Code zu erhalten. Dabei wird insbesondere der Name der jeweils gewünschten CSS-Klasse mit übermittelt.

Listing 3: Datei code.js - Erzeugung Hauptmenüzeile

1. function NavZeile1(start, vonlink)
2. {
3. // start: Indexnr., ab welcher der erste Menüeintrag steht
4. // vonlink: Indexnr., die der abgebildeten Seite entspricht
5. // (dieser Menüpunkt wird nicht anklickbar dargestellt)
6. var z1=""; // Hierin wird der Code für die 1. Menüzeile gesammelt
7.    for(i = start; i <= start+9; i++) // max. 10 Einträge je Menü
8.    {
9.       if(l[i]=="")continue; // übergehe nichtgenutzte Nummern
10.       z1+=NavZelle(a[i], l[i], (vonlink==i)?"":v[i], "btn");
11.    }
12.    return z1;
13. }

Das vollständige Menü

Die Beispielparameter zeigen den Aufruf der Funktion Navigationsteil durch geschichte.htm. Es wird die Hauptmenüzeile und die Untermenüzeile 4 angezeigt. Die Punkte ?Info?s? und ?Firmengeschichte? sind nicht anklickbar. Die Menüzeilen sehen also etwa so aus:

Angebote   Info?s    Impressum
Firmengeschichte                 

Ähnlich wie bei den anderen Funktionen gibt es auch hier eine Sammelvariable. Es wird die Funktion NavZeile1 aufgerufen, falls erforderlich auch NavZeile2. Weitere HTML-Befehle können zugefügt werden, falls sie in jeglichem Menü erscheinen sollen. Im Beispiel ist es die Grafik logo.gif, die mit einem zur Homepage führenden Hyperlink versehen ist.
 

Webseite
mit Menü

• Verweise auf die einzubindenden Scriptdateien (zwischen <head> und </head>):
  <script language="JavaScript" src="db.js" type="text/javascript"></script>
  <script language="JavaScript" src="code.js" type="text/javascript"></script>
  Liegen die js-Dateien nicht im gleichen Ordner wie die HTML-Datei, geben Sie wie üblich im src-Argument den Pfad an. Diese Angabe ist für alle Seiten gleich.
• Aufruf der Menüfunktion (Beispiel):
  <script language="JavaScript">
       Navigationsteil(1, 4, 40, 41);
  </script>
  Die in Klammern anzugebenden Parameter bestimmen den Menüinhalt. Diese Angaben variieren für jede Webseite. Eine Änderung ist dann erforderlich, wenn Sie die Nummernbelegung ändern sollten.
  Der Aufruf erfolgt (hinter <body>) an der Stelle, wo das Menü stehen soll. Dies kann auch in einer Tabelle oder auf einer Layerfläche sein.

Optional sind folgende Komponenten:

• Angaben für Surfer ohne JavaScript:
  <noscript>
    <a href="index.htm">Home</a> -
    <a href="kontakt.htm">Impressum</a> -
    <a href="sitemap.htm">andere Seiten (Sitemap)</a>
</noscript>
Dies folgt unmittelbar dem </script>. Hiermit wird ein Ausweichmenü angeboten, das zu den wichtigsten Seiten Homepage, Impressum/Kontakt und Sitemap verzweigt.
  Die Seite sitemap.htm enthält übersichtlich angeordnete Links auf alle anderen Inhaltsseiten (s. Beispielweb auf Heft-CD).
• Angaben zum verwendeten StyleSheet:
  <link rel="stylesheet" type="text/css" href="styles.css">
  Diese Zeile befindet sich im Head-Bereich und benennt die Datei, in welcher die Format­informationen stehen.

Listing 6: Datei leistungen.htm ? eine typische Webseite

1. <html>
2. <head>
3.   <meta http-equiv="Content-Type"
4.         content="text/html; charset=iso-8859-1">
5.   <meta http-equiv="Content-Language" content="de">
6.   <meta name="author" content="computer-schroeder.de">
7.   <meta http-equiv="Content-Style-Type" content="text/css">
8.   <link rel="stylesheet" type="text/css" href="styles.css">
9.   <script language="JavaScript" src="db.js"
10.           type="text/javascript"></script>
11.   <script language="JavaScript" src="code.js"
12.           type="text/javascript"></script>
13.   <title>Unsere Dienstleistungen</title>
14. </head>
15. <body>
16.   <script language="JavaScript">
17.       Navigationsteil(1, 1, 10, 15);
18.   </script>
19.   <!-- Minimum für Surfer ohne JavaScript -->
20.   <noscript>
21.      <a href="index.htm">Home</a> -
22.      <a href="kontakt.htm">Impressum</a> -
23.      <a href="sitemap.htm">andere Seiten (Sitemap)</a>
24.   </noscript>
25. <!-- Hier beginnt der normale Seiteninhalt -->
     ...
26. </body>
27. </html>

Das StyleSheet

Außerdem werden mit
.btn  { FONT-SIZE: 9pt; TEXT-ALIGN: left; }
.btlt { FONT-SIZE: 8pt; TEXT-ALIGN: left; }

die StyleSheet-Klassen für die Menüpunkte definiert, wie sie von der Funktion NavZeile1 bzw. NavZeile2 benutzt werden. Der Klassenname wird mit einem vorangehenden Punkt als solcher gekennzeichnet.

Im Beispiel wird eine explizite Schriftgröße zugewiesen. Die Linksausrichtung sichert ab, daß höherrangige Formatangaben nicht das Menü ?durcheinanderwürfeln?.

Listing 5: Beispiel für Stylesheet

1. body { padding : 0px; height : 100% ; width : 100% ;
2.    background-attachment:fixed; overflow : auto;
3.    margin-left: 6px; margin-top: 6px; margin-bottom: 5px;
4.    font-family: Verdana, Arial, sans-serif; font-size: 11pt;
5.    SCROLLBAR-FACE-COLOR: #E1E9E9;
6.    SCROLLBAR-HIGHLIGHT-COLOR: #CCFFFF;
7.    SCROLLBAR-SHADOW-COLOR: #CCffff;
8.    SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
9.    SCROLLBAR-ARROW-COLOR: #008080; SCROLLBAR-TRACK-COLOR: #FFFFFF;
10.    SCROLLBAR-DARKSHADOW-COLOR: #008080; }
11. a:link { color: #008080; text-decoration: none }
12. a:visited { color: #109090; text-decoration: none }
13. a:hover { color: #004040; text-decoration: underline overline }
14. a:active { color: #00FF00; text-decoration: none;
15.            font-weight: bold }
16. H1 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: #400000 }
17. H2 { FONT-WEIGHT: bold; FONT-SIZE: 14pt; COLOR: #400000 }
18. H3 { FONT-SIZE: 12pt; COLOR: #008080 }
19. /* Klassen für normale und kleinere Menüpunkte */
20. .btn { FONT-SIZE: 9pt; TEXT-ALIGN: left; }
21. .btlt { FONT-SIZE: 8pt; TEXT-ALIGN: left; }
22. HR { COLOR: #008080; height:1pt; }

Eine Seite
kommt hinzu

Download
erweitertes Beispielweb

Zuerst werden Sie sich über den Platz der neuen Seite in der Webhierarchie klar. Im Beispielweb werden wir eine Seite beratung.htm in das erste Untermenü einfügen:

Dort soll sie zwischen ?Shop?(12) und ?Dienstleistungen?(15) erscheinen. Also geben wir der neuen Seite die Nr. 14 und fügen in die db.js die entsprechenden Zeilen ein:

   l[14]="beratung";
   a[14]="Beratung";
   v[14]="Nutzen Sie unsere Beratungsleistungen";

Die neue Seite beginnen Sie vielleicht mit einer Vorlage ähnlich Listing 6 ? hier sind alle erforderlichen Teile bereits enthalten. Aktualisieren Sie nur noch die Parameter der Menüerzeugungsfunktion:

   Navigationsteil(1, 1, 10, 14);

Den Seiteninhalt erzeugen Sie mit Ihren vertrauten Werkzeugen, die unsere Scriptkomponenten jedoch unangetastet lassen sollten.

Schließlich sollten Sie noch daran denken, die neue Seite in der Sitemap aufzuführen. Fertig!

Hier können Sie dieses erweiterte Beispielweb ausprobieren.

Sie haben ein flexibles System, mit welchem Sie einheitliche Menüs in einer größeren Website nutzen können. Viel Erfolg!