Vertikale Tabs mit CSS und jQuery

Tabs, sind ein innovatives und viel genuztes Mittel um viel Inhalt auf wenig Platz unterzubringen.

Doch manchmal ist es gar nicht so einfach, Tabs mit CSS und JavaScript zu kreieren. Deshalb biete ich euch hier, eine kleine Möglichkeit an.

Sie basiert nicht wie viele andere Möglichkeiten nur auf CSS, ist jedoch dadurch etwas kleiner und leichter zu verwenden. Mein System „TabScript“ verwendet jedoch jQuery und ist deshalb auf diese Bibliothek angewiesen.

Die Verwendung ist einfach. Ein Beispiel finden sie bei jsFiddle.

Zuerst wird ein Container mit der Klasse fn_tabs erstellt. In diesen herein, kommt nun eine unsortierte Liste (<ul>) die mit den jeweiligen Tabs gefüllt wird. Die <li>-Elemente brauche hier ein zusätzliches Attribut, was von meinem Skript ausgelesen wird. Diese Attribut heißt data-target="" und dort wird die ID eingetragen in der sich der Text befindet der später angezeigt werden soll. Als kleines Beispiel:

<li data-target="referenzen">Referenzen</li>

Dieses Beispiel würde bei einem Klick das div-Element mit der ID #referenzen in den Content Bereich laden.
Und da kommen wir zu einem weiteren Element meines Skriptes, um den Bereich zu definieren wo der Inhalt angezeigt werden soll, muss ein leeres div-Element mit der ID content erstellt werden. Dort wird später der Inhalt reingeladen.

Der Inhalt selbst wird auch mit div-Elementen angelegt. Jedoch braucht das Element einmal eine ID durch die es später aufrufen wird. Diese ID muss exakt dieselbe sein die auch beim jeweilgen Listen Element im data-target-Attribut steht. Außerdem braucht es noch die Klasse text welche durch CSS ausgeblendet wird, um nicht direkt jeden Text einzublenden.

Am besten jedoch guckt ihr euch das Skript „TabSkript“ selbst an. Dann versteht ihr auch leichter wie es funktioniert. 🙂

Möglichkeiten

In der Inhaltssektion dürfen alle HTML Befehle genutzt werden, es gibt keine Einschränkungen. Das bedeutet das auch Bilder und formatierte Texte möglich sind.

Auch die Größen können leicht angepasst werden, dafür müssen nur bei den CSS Selektoren #content(für die Größe der Contentarea) .fn_tabs li (für die Größe der Tabs) die jeweiligen Angeben geändert werden. Auch das Aussehen lässt sich so leicht anpassen.

Download

Zu finden ist das Skript entweder bei jsFiddle.

Skript „TabSkript“

Oder hier als Download:

Download TabSkript

Vielen Dank fürs Debuggen geht an @iWebaholic 😉

Ich bin Kevin, und schreibe hier über Themen die sich von CSS über Designs bis zur testgetriebenen Entwicklung mit PHP erstrecken. Ich arbeite in einer kleinen Firma als PHP-Entwickler und entwickle dort PHP Backends für verschiedene Projekte vorallem mit Laravel. Privat betreibe ich noch diesen Blog und notesafe.

5 Kommentare Schreibe einen Kommentar

Schreibe einen Kommentar