Tab-Interface ohne JavaScript

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 14 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Nicht Menüleisten, sondern Contentboxen werden so gemacht. Per Mausklick werden über eine kleine Reiternavigation weitere Informationen aufgerufen. Die sind entweder bereits in der Seite versteckt oder werden dynamisch nachgeladen. Javascript, DHTML und AJAX, verschiedene Techniken kommen zum Einsatz. Sie sind mehr oder weniger browsersicher. Mitunter klappt es mit dem Backbutton nicht mehr. Das Angebot dürfte aber genügen, um etwas nach eigenem Geschmack zu finden. Schliesslich wird diese Art der Contentpräsentation immer beliebter.

Dr.Web: 14 Tab Interface Scripts

Tab-Inteface

Das Zitat trifft es: mehr oder weniger browsersicher. Für mich einmal mehr Anlass, zu prüfen, kann man die Boxen auch mit reinem CSS in dieser populären Darstellungsform präsentieren? Nicht immer ist JavaScript erwünscht, was die Implementierung recht schön und einfach macht. Aber, noch immer sind viele Unternehmen der Sprache nicht willig und sperren sie für ihre Anwender. Hat man keinen dynamischen Inhalt, wie es oft auf kleinen Seiten ist, dann kann man das Tab-Interface auch mit einfachem CSS erzeugen.

Idee und Lösung

Die grundlegende Idee erzeugt für die Unterschiedlichen Inhalte verschiedene div’s, welche via Anker angesprochen werden.


. . .

Die einzelnen Boxen sind eingeschlossen in einen weiteren Container (div).


. . .
. . .
. . .

Mittels CSS werden dann die Boxen so formatiert, dass sie übereinander liegen und overflow: hidden; sorgt dafür, dass kein Überlauf statt findet.


.content {
height: 35em;
}

#container {
height: 35em;
overflow: hidden;
}

Die Container müssen gleich hoch sein und es ist nur mit overflow: hidden; möglich. Diese Einschränkungen muss man hinnehmen. Alternativ kommt dann wieder die JavaScript-Lösung ins Spiel.

Meine Lösung steht als Download bereit und ich habe den Code übersichtlich in eine Datei gelegt, so dass die Lösung nachvollziehbar sein sollte. Vielleicht hat der eine oder andere Verbesserungsvorschläge?

Demo

Live und in Farbe zu finden in meinen Experimenten: „Tab-Interface ohne JavaScript, nur mit CSS

Download:



Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als txt-DateiDownload als txt-Datei: tab_interface_mit_css.txt – 13 kByte

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

9 Kommentare

  1. Find ich prinzipiell wirklich ein interessanter Ansatz, nur dass die Container gleich hoch sein müssen ist bedingt ein Problem, je nachdem was für Inhalte man präsentieren möchte. Das könnte für eine kleine Seite mit wenig Inhalt aber schon taugen. Gute Arbeit!

  2. Allerdings muss ich dazu noch sagen, dass es schon problematisch ist, dass bei den Javascript-Lösungen der „Zurück“ Button im Browser nicht greift. Von daher könnte man ja vielleicht beides Verbinden. Leider bin ich in Javascript nicht so bewandert, sonst würde ich mich mal dran versuchen.

  3. Ich habe hier bei mir das „Kochbuch CSS“ liegen, in dem das viel einfacher realisiert ist: Eine simple Liste (ul) wird einfach via CSS formatiert, die Listenelemente (li) mit display: inline; in Reihe dargestellt.

    Der einzige Nachteil dieses Ansatzes: Das Listenelement für die aktive Seite muss immer separat gekennzeichnet werden, im Beispiel mit id="aktiv".

    Der Vorteil der Lösung: ich habe keinen Container, der mir evtl. den Umfang des Inhaltes diktiert oder beschränkt.

  4. Hi Frank,
    keine Ahnung, ob das an meinen Browsern liegt oder an was anderem:
    Immer wenn ich in deiner Demo auf ein Tab klicke wird zum einen die Seite neu geladen und zum anderen lande ich (sofern der Inhalt der Seite selbige zum Scrollen zwingt) immer ein gutes Stück weiter unten, sodass ich hochscrollen müsste um auf ein anderes Tab zu klicken. Das passiert bei mir sowohl in meinem FeedReader (GreatNews) als auch im Opera und im Firefox. Empfinde ich bzgl. Benutzbarkeit ein wenig als Manko, aber als Proof of Concept sicherlich gut.

    Interessanter finde ich allerdings – ohne deine Arbeit schmälern zu wollen – den Ansatz „Mini tabbed pages“ von Stu Nicholls auf CSSplay „Mini tabbed pages“. Da gibt es wenn ich das richtig interpretiere auch weniger Probleme, wenn man die Größe des Inhaltes im Vorraus nicht kennt, hab mich aber nicht so lang mit beschäftigt.

    Gruß
    Alex

  5. @Markus: die Idee hatte ich Vorfeld auch, aber dann wäre es semantisch nicht richtig, denn ich stell ja keine Liste dar, sondern getrennte Inhalte, je eine Box. Aber ich werde es mir merken, eventuell benötigt man es mal.

    @Xel: hm… Die Inhalte sind ja schon da, warum springt dein Browser bei Ankern und lädt neu.
    Die Lösung von Stu Nichols schau ich bei Gelegenheit an, denn ich fand keinen Ansatz bei der Suche.
    EDIT: vestanden, ja sicher, er springt an den Ankerpunkt. Da ich aber nur die Funktionsweise testen wollte, habe ich das nicht bis ins Detail beseitigt. Lässt sich aber machen.Auf jeden Fall gefällt die Lösung von CSSPlay, absolut formatiert.

  6. Frank, dann sieh das doch so: Du erstellst eine Linkliste zu internen Inhalten, und formatierst die anschließend als Tabs. Ich denke, so kann man es auch semantisch vertreten. Ggf. kann ich die Links in der Liste auch als Überschrift ausführen, und die Schriftgröße per CSS verkleinern.

  7. Hm ich tippe mal darauf, dass es mim reload daran liegt, dass das ganze ne .php ist und dein Link auf …php?anker=ankerc12#c12 zeigt…

    ansonsten: Stu ist immer meine erste Anlaufstelle, wenn ich irgendwas bzgl. CSS brauche und keine Ahnung hab, ob das überhaupt machbar ist – der Mann ist über 60 und in CSS absolut fit – und immer wieder gewillt an die Grenzen des Machbaren zu gehen…

  8. Ihr habt recht, so werde ich es also verfeinern, wenn ich wieder Luft habe und die Idee zu einer Lösung verbessern. Ja, die Anker-Lösung via PHP sorgt für einen Reload, mit reinem CSS geht es sauberer.

    @Markus. Ich habe in den Experimenten auch mal div mit ul ersetzt, was ich dann hier auch im Theme im Footer umgesetzt habe. Funktioniert ähnlich, nur ohne den Tab-Hintergrund.

    Herzlichen Dank für das Feedback!

Kommentare sind geschlossen.