Die klassische Sitemap ist bei weitem nicht die einzige Lösung, umfangreiche Inhalte zugänglich zu machen. Auch der A-Z Index weiß in verschiedenen Formen zu gefallen.
So mancher Besucher mag eher den klassischen A bis Z Index, den man aus Büchern kennt. Wie die Sitemap auch, bietet er eine schnelle Navigation neben dem Hauptmenü, ist dabei aber mehr am Benutzer orientiert. Sitemaps stellen im Grunde die Struktur der Website dar, der A bis Z Index dagegen zeigt alle Themen auf, die der Besucher auf der Website finden kann – und zwar alphabetisch.
Erstklässler
Nun gibt es verschiedene Wege, einen solchen Index auf der Website umzusetzen. Die einfachste Technik nutzt ausschließlich HTML. So ein Index kann aber schnell sehr lang werden. Eine Lösung wäre, ihn auf 26 Seiten aufzuteilen. Doch auch die Darstellung auf einer Seite bietet Vorteile. Denn hier kann ohne Seitenhüpfen auf einen Blick erfasst werden, was die Website bietet. Das freut auch den Screen Reader oder den Keyboard-Navigator. Sofern man dies überhaupt für nötig hält, der Dr. Web A-Z Index kommt ohne all das aus.
Einfaches A-Z ohne „Style“
Eine einfache Liste mit einigen Anker-Punkten reicht also aus. Der Besucher klickt einen der Buchstaben an und springt so die Seite herunter zu den gewünschten Informationen. In dem „a“-Element für den Anker werden hier beide Attribute „id“ und „name“ genutzt. Ein Browser, der den Verweis nach der XHTML-Syntax behandelt, benötigt das „id“-Attribut, während ein Browser, der den Verweis nach HTML-Syntax ausführt, das „name“-Attribut zur Ermittlung des Ankers verwendet. Sicher ist sicher.
Ohne CSS hat HTML keinen Stil. Schon wenig Code in einer externen CSS-Datei genügt, um eine horizontale Navigation samt Hover-Effekt hervorzuzaubern. Und wo wir gerade dabei sind, dürfen auch Schriftart und Linkfarbe verschönert werden. Die erste Änderung ist allerdings in der HTML-Datei nötig, um diese auf CSS vorzubereiten. Selbstverständlich gehört der Link auf die externen CSS-Daten dazu:
<link rel="stylesheet" media="screen" href="az.css">
<ul id="abisz">
#abisz{
list-style-type:none;
background:#FF0;
padding:0;
margin:0;
z-index:10;
}
#abisz li{
display:inline;
list-style-type:none;
margin:0;
padding-right:5px;
}
#abisz li a{
z-index:100;
text-decoration:none;
padding:0 5px;
color:#000;
}
#abisz li a:hover{
background:#fff;
color:#000;
}
#abisz li a:active,#abisz li a:focus{
background:#000;
color:#fff;
A-Z mit „Style“
Redmonds Rache
Es könnte alles so schön sein, doch Microsofts Internet Explorer macht uns einen Strich durch die Rechnung. Gut, es ist nur eine Kleinigkeit, doch unser Index soll nach Möglichkeit perfekt sein. Nutzt man das Keyboard statt der Maus zur Navigation, dann kann man beim Firefox mit dem Drücken der Tab-Taste durch die einzelnen Buchstaben von A bis Z hüpfen und mit „Enter“ bestätigen. Ein weiterer „Tab“ bringt uns zum nächstgelegenen Link, hier im Beispiel wäre das „Zurück zur Übersicht“. Beim Internet Explorer landet man ebenfalls mit „Enter“ an der gewünschten Stelle, doch ein weiterer „Tab“ bringt uns nicht zum nächsten Link, sondern zurück zur Navigation. Ein Teufelskreis. Das lässt sich umgehen:
<div>
<h3><a name="a" id="a">A</a></h3>
<ul>
<li>Platzhalter</li>
<li>Platzhalter</li>
<li>Platzhalter
<li>Platzhalter
<li>Platzhalter
</ul>
<p class="zuruck"><a href="#zurnavigation">Zurück zur Übersicht</a></p>
</div>
Wie man sieht, wird jeder Buchstabenbereich zwischen <div> und </div> eingeklemmt. Die kompletten Inhalte von A bis Z werden zusätzlich mit <div id=“inhalt“> … </div> umschlossen und dazu in der CSS-Datei „width“ definiert.
#inhalt div{
width:100%;
}
Dynamisches A – Z
Unser Ziel ist es, nur jeweils den Part des Index anzuzeigen, für den sich der Besucher interessiert. So verhindert man die ellenlange Liste, spart Platz und schafft mehr Übersicht. Das Script fragt, ob Javascript im Browser aktiviert ist und zeigt dann als erstes die Sektion für den Buchstaben A an. Wird ein anderer Buchstabe angeklickt, wechselt das Script automatisch die Sektion.
Das Javascript zum Download (Ziel speichern unter…)
Auch in der CSS-Datei gibt es eine Änderung, die dafür sorgt, dass ungewünschte Sektionen solange unsichtbar bleiben, bis man sie aufruft:
.verstecken{
position:absolute;
left:-999em;
}
.zeigen{
position:relative;
left:0;
}
A bis Z Index (Javascript & CSS A)
Lebendiges A – Z
Wem das noch nicht reicht, der kann die Anzeige weiter „tunen“, so dass schon die Berührung des Mauszeigers zur Änderung der Sektion führt. Das Javascript ist schon vorbereitet, es muss nur noch in der HTML-Datei für das Menü folgender Code eingefügt werden:
<ul id="abisz" class="hover">
A bis Z Index (Javascript & CSS B)
A bis Z Index, „auf der Stelle“
Viele Inhalte sorgen wieder für lange Listen. Schon die Navigation wurde horizontal geordnet, darum sollte man auch die Inhalte mehrspaltig gliedern. In die CSS-Datei kommt dafür dieser kleine Zusatz:
#inhalt.spalten li{
float:left;
width:10em;
}
#inhalt.spalten p.zuruck{
clear:both;
}
<p class="zuruck"><a href="#zurnavigation">Zurück
zur Übersicht</a></p>
A bis Z Index (Javascript & CSS C)
Erstveröffentlichung 12.09.2005
