Anzeige
Anzeige
News
Artikel merken

CSS3: Dynamische Tabs ohne JavaScript erstellen

Die Darstellung von Inhalten per Tabs ist eine beliebte Möglichkeit, um viel Information auf wenig Platz unterzubringen. Gerade bei Produktbeschreibungen bietet es sich an, zusätzliche Informationen in eine Infobox mit Tabs zu setzen. Mit den Mitteln von CSS3 lassen sich solche Tabs und vor allem die Navigation durch die Tabs ohne Einsatz von JavaScript realisieren.

Von Denis Potschien
3 Min. Lesezeit
Anzeige
Anzeige

Tabs per HTML bauen

Zunächst wird das HTML-Gerüst für die Infobox und der Tab-Elemente erstellt. Welche HTML-Elemente genommen werden, ist für die Funktionalität nicht relevant. Da sollte jeder schauen, welche Elemente semantisch am besten passen. Im Beispiel nutzen wir die Elemente ARTICLE als übergeordnetes Element für die Box und SECTION als Teilbereich für den jeweiligen Tab-Inhalt. Per H2-Überschriften wird die Tab-Beschriftung ausgezeichnet:

<article class="infobox">
    <section id="allgemeines">
        <h2><a href="#allgemeines">Allgemeines</a></h2>
        <p>Hier stehen ganz allgemeine Informationen.</p>
    </section>
    <section id="funktionen">
        <h2><a href="#funktionen">Funktionen</a></h2>
        <p>Hier stehen Informationen zu den Funktionen</p>
    </section>
    <section id="preise">
        <h2><a href="#preise">Preise</a></h2>
        <p>Hier stehen Informationen zu den Preisen.</p>
    </section>
</article>
Anzeige
Anzeige

Wichtig ist, dass jeder Tab-Bereich eine ID zugewiesen bekommt, auf die per Link innerhalb der H2-Überschrift verwiesen wird. Auf diese Weise lassen sich die Bereiche per CSS3 und dem Pseudoattribut „:target“ ansprechen.

Alles Weitere wird per CSS geregelt – sowohl das Aussehen der Tabs als auch die Navigation durch die einzelnen Tabs.

Anzeige
Anzeige

Tab-Aussehen per CSS definieren

Zunächst wird das Aussehen der Tab-Bereiche – also der SECTION-Elemente – festgelegt. Da dem ARTICLE-Element eine Klasse zugeweisen wurde, lassen sich alle Tab-spezifischen Angaben über diese Klasse definieren:

Anzeige
Anzeige
article.infobox section {
    position: absolute;
    display: block;
    width: 400px;
    height: 200px;
    top: 100px;
    background-color: #c5d2de;
}

Im Beispiel wird einfach eine farbige Box mit festen Größenangaben definiert. Im nächsten Schritt wird das Aussehen der einzelnen Tabs – also der H2-Elemente – definiert:

article.infobox section h2 {
    position: absolute;
    left: 0;
    top: -30px;
    width: 124px;
    height: 29px;
    font-family: Verdana;
    font-size: 15px;
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 1;
}

Auch hier wird für jeden Reiter eine feste Größe definiert. Außerdem werden sie so platziert, dass sie oberhalb der Box dargestellt werden. Da bislang alle drei Tabs an derselben Position liegen, müssen die Tabs unterschiedlich platziert werden. Dafür wird die CSS-Eigenschaft „nth-child()“ eingesetzt:

Anzeige
Anzeige
article.infobox section:nth-child(2) h2 {
    left: 120px;
    z-index: 0;
}

article.infobox section:nth-child(3) h2 {
    left: 240px;
    z-index: -1;
}

Hiermit lassen sich der zweite und dritte Tab entsprechend platzieren. Per „z-index“ wird dafür gesorgt, dass der zweite Tab hinter dem ersten und der dritte hinter dem zweiten platziert werden. Die Angaben lassen sich für weitere Tabs entsprechend fortführen.

Zu guter Letzt wird noch das Aussehen der Links definiert:

article.infobox section h2 a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}

Jetzt hat unser ARTICLE-Bereich schon ein typisches Tab-Aussehen. Die drei H2-Elemente ragen als Reiter aus der Infobox heraus. Von den drei SECTION-Elementen ist nur das erste sichtbar, da die anderen beiden sich dahinter verbergen.

Anzeige
Anzeige
Tabs mit CSS3 bauen

Tabs mit CSS3 bauen

Tab-Navigation per CSS

Um zwischen den einzelnen Tabs zu wechseln, wird das Pseudoattribut „:target“ eingesetzt. Mit dem Pseudoattribut lässt sich das Aussehen der Elemente ändern, deren ID über einen Link aufgerufen werden:

article.infobox section:target, article.infobox section:target h2 {
    color: #000000;
    background-color: #c5d2de;
    z-index: 1;
}

article.infobox section:target h2 a {
    color: #194b7d;
}

Über die Änderung der Eigenschaft „z-index“ wird das jeweilige SECTION-Element, dessen ID per Link aufgerufen wird, in den Vordergrund gesetzt. Zusätzlich werden die Text- und Hintergrundfarbe des SECTION- und H2-Elementes angepasst. Außerdem wird auch die Farbe des Links der aktiven Tabs geändert.

Die CSS-Navigation funktioniert bei allen modernen Browsern. Wer auch ältere Browser bedienen möchte, kann eine entsprechen Funktionalität per JavaScript ergänzen.

Anzeige
Anzeige

Eine Demo zu den dynamischen CSS3-Tabs gibt es auf jsFiddle.

Was haltet ihr von der Möglichkeit, dynamische Tabs per CSS zu realisieren? Setzt ihr so etwas ein oder kennt ihr weitere Beispiele für CSS-Navigationen?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

jaan

geht dann aber schon nicht mehr ab IE 8. Somit für den Produktivbetrieb nicht geeignet.

Antworten
Kay Strobach

nette spielerei – aber im alltag leider nicht nutzbar ^^

Antworten
Dirk Jesse

Wie wird in diesem die Tastatursteuerung der Tabs organisiert? Wenn ich das richtig sehe, werden die Überschriften ja direkt als Tabreiter verwendet. Nicht alles, was per CSS only geht, macht auch CSS only Sinn. Ganz konkret, eröffnen sich hier einige Usability/Accessibility-Probleme:

Die Tabreiter werden per :target sichtbar geschaltet. Das bedeutet, dass es nicht möglich ist, einen „aktiven“ Tab per default zu setzen, denn per CSS kann der Focus ja nicht gesetzt werden. Was aus Gestaltungssicht und Usability recht ungünstig ist.

Reichert man die Tabinhalte mit Links an, kommt die Tabreihenfolge vollständig durcheinander, das Zurechtfinden wird massiv erschwert. Empfehlenswert ist diese Lösung daher für die Praxis nicht, ganz unabhängig von den Darstellungsproblemen in älteren Browsern.

Meine Empfehlung für Tabs auch weiterhin: „Accessible-Tabs“ von Dirk Ginader.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige