Beim Joggen habe ich eigentlich immer die eine oder andere gute Idee. Diesmal habe ich mir Gedanken zum Thema Tabbed Navigation gemacht. Tabbed ist in. Firefox und Opera haben schon seit langem Tabbed Browsing. Microsoft hat seinem Internet Explorer in der Version 7 nun auch dieses Feature verpaßt. Aber auch das neue Menü von Microsoft Office 2007 ist Tabbed-basiert. Die Eigenschaftsfenster von Windows hatten schon lange Reiter. Auch die Eigenschaften in vielen Content Management Systemen werden über Reiter verwaltet. Auch auf Websites allgemein sind diese Tabs/Reiter immer öfters zu finden.
Ich habe mir überlegt, wie ich eine Seite mit „Tabbed Content“ aufbauen würde. Es wäre natürlich möglich, das ganze statisch zu realisieren. Aber ich will es mit JavaScript realisieren. Die Inhalte sollten jedoch trotzdem für alle lesbar sein. Daher würde ich den Code wie folgt aufbauen:
<ul>
<li><a href="#inhalt_1">Inhalt 1</a></li>
<li><a href="#inhalt_2">Inhalt 2</a></li>
<li><a href="#inhalt_3">Inhalt 3</a></li>
</ul>
<div id="inhaltsbox">
<div id="inhalt_1">
<h2>Inhalt 1</h2>
<p>Lorem Ipsum und so weiter.</p>
<p>Nochmal ein Absatz.</p>
</div>
<div id="inhalt_2">
<h2>Inhalt 2</h2>
<h3>Eine Überschrift</h3>
<p>Nochmal ein Absatz.</p>
</div>
<div id="inhalt_3">
<h2>Inhalt 3</h2>
<p>Lorem Ipsum und so weiter.</p>
<p>Nochmal ein Absatz.</p>
</div>
</div>
Bei XHTML gehen die internen Verweise auf die IDs. Bei HTML4 würde ich noch ein <a name=“inhalt_1″></a> einfügen.
Jetzt habe ich oben eine Liste mit den Links auf die Inhalte. Die Inhalte selber werden im Moment untereinander dargestellt. Mit CSS kann ich die Linkliste oben leicht umformatieren und als Buttons oder auch im Reiter-Design nebeneinander setzen. Die Inhalte kann ich mit display: none; verstecken, bzw. mit display: block; wieder anzeigen.
Das Ein- und Ausblenden erfolgt über JavaScript. Die CSS-Eigenschaften display: none; würde ich jedoch nur über JavaScript den Inhalten zuweisen. Ohne JavaScript würden die Texte untereinander angezeigt werden. Die Inhalts-Überschriften (h2) würde ich mit JavaScript immer ausblenden.
Somit hätte ich für Leute mit JavaScript einen Tabbed Content, für Besucher ohne JavaScript die Texte lesbar untereinander mit direkten Sprungadressen ;-)