Tabreiter mit CSS erstellen

Mit ein wenig CSS ist es möglich, ein ansprechendes Tabreiter-System zu erstellen. So lassen sich Inhalte leichter organisieren ohne neue Unterseiten erstellen zu müssen. Der Betrachter kann dann ganz bequem per Registerreiter die verschiedenen Inhalte wechseln.

In diesem Artikel erfährst du, wie das funktioniert.

 

Ansprechende Tabreiter mit reinem CSS erstellen

Das Beste an dieser Lösung ist, dass sie auf den Einsatz von JavaScript völlig verzichtet. Das komplette Tabreitersystem ist mit reinem CSS erstellt und gepflegt. Du kannst es beliebig erweitern oder kürzen. Einzelne Tabs kannst du sogar deaktivieren.

Einziger Wermutstropfen: Mit ganz alten Browsern funktioniert der Spaß nicht. Jedoch funktioniert das Ganze immerhin mit allen aktuellen Browsern (siehe Liste unten).

 

Die nachstehenden Code-Beispiele für das Stylesheet und die HTML-Datei habe ich in einer ZIP-Datei für dich zum bequemen Download zusammengefasst: Tabreiter.zip (3,44 KB).

 

Beispiel (CSS):

.tabreiter
{
    width: 100%;
    height: 220px;
}   
 
.tabreiter ul,
.tabreiter li
{
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.tabreiter,
.tabreiter input[type="radio"]:checked + label
{
    position: relative;
}
 
.tabreiter li,
.tabreiter input[type="radio"] + label
{
    display: inline-block;
}
 
.tabreiter li > div,
.tabreiter input[type="radio"]
{
    position: absolute;
}
 
.tabreiter li > div,
.tabreiter input[type="radio"] + label
{
    border: solid 1px #ccc;
}
 
.tabreiter
{
    font-family: Arial, Sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #404040;
}
 
.tabreiter li
{
    vertical-align: top;
}
 
.tabreiter li:first-child
{
    margin-left: 8px;
}
 
.tabreiter li > div
{
    top: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    overflow: auto;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.tabreiter input[type="radio"] + label
{
    margin: 0 2px 0 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
.tabreiter input[type="radio"]:checked + label
{
    z-index: 1;
    background: #fff;
    border-bottom-color: #fff;
    cursor: default;
}
 
.tabreiter input[type="radio"]
{
    opacity: 0;
}
 
.tabreiter input[type="radio"] ~ div
{
    display: none;
}
 
.tabreiter input[type="radio"]:checked:not(:disabled) ~ div
{
    display: block;
}
 
.tabreiter input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: no-drop;
}

 

 

Beispiel (HTML):

<!DOCTYPE html>
 <html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <title>Code-Beispiel von Webmasterparadies.de</title>
    <link rel="stylesheet" href="tabreiter.css" type="text/css" />
</head>
<body>
<div class="tabreiter">
    <ul>
        <li>
            <input type="radio" name="tabreiter-0" checked="checked" id="tabreiter-0-0" /><label for="tabreiter-0-0">Lorem Ipsum</label>
            <div>
                <h3>Lorem Ipsum</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-1" /><label for="tabreiter-0-1">Werther</label>
            <div>
                <h3>Werther</h3>
                <p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!</p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-2" /><label for="tabreiter-0-2">Kafka</label>
            <div>
                <h3>Kafka</h3>
                <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben.</p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-3" disabled="disabled" /><label for="tabreiter-0-3">Trappatoni</label>
            <div>
                <h3>Trappatoni 1998</h3>
                <p>Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke. Offensiv, offensiv ist wie machen wir in Platz. Zweitens: ich habe erklärt mit diese zwei Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni? Diese Spieler beklagen mehr als sie spielen! Wissen Sie, warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel!</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

 

Anzeigebeispiel ansehen

 

Browser-Kompatibilität

Dieses Script habe ich in folgenden Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

2 Gedanken zu „Tabreiter mit CSS erstellen

  • 22. April 2017 um 10:14
    Permalink

    Hallo,

    entferne einfach aus dem html-code für den ersten Tab das:

    checked=“checked“

    Antwort
  • 21. März 2017 um 16:22
    Permalink

    Hallo,
    vielen Dank für die tolle Anleitung.
    was muss ich ändern, dass erst beim klicken der Tab Kontent sichtbar wird?

    Mein Wunsch wäre, dass am Anfang nur die Tabs (ohne deren Inhalt) angezeigt werden. Erst beim Klick soll dann der Tabinhalt angezeigt werden.

    Vielen Dank im Voraus.

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.