Mit den neuen Techniken, die CSS3 mit sich bringt sowie den vorhandenen CSS Techniken ist es möglich verstärkt auf Javascript zu verzichten. Eigentlich garkeine so schlechte Sache.
Wir werden einen Tab erstellen, der komplett ohne Javascript funktioniert und wirklich nur CSS Techniken nutzt. Hierbei helfen uns die neuen CSS3 Techniken um dieses Vorhaben zu realisieren.

Schau dir die Demo an

Das HTML Markup

Most Recent Posts





Most Popular Posts

Was haben wir?

• Einen div Container, der den kompletten Inhalt enthält - #csstabs
• Zwei div Container, die den Tab Titel sowie den Inhalt enthalten - #tab1 #tab2
• h3 Tags für die Überschriften
• Tabinhalt als Liste ( Kann in div`s geändert werden, falls gewünscht )

Die CSS Datei

#csstabs{
position:relative;
width:300px;
height:290px;
}
#csstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
}

Wir geben den CSS Tabs eine relative Position, sodass wir in diesen Tabs Dinge absolut positionieren können um eine Höhe sowie Breite festzulegen. Dann geben wir den h3 Tags eine Höhe und einen Rahmen an drei Stellen. Außerdem geben wir dem Content einen Innenabstand inform der Padding Eigenschaft sowie einen Hintergrund und einen Rahmen.

#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:42px;
background:#fff;
height:230px;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
background:#fff;
}
#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:40px;
height:230px;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
}

Nun weisen wir den einzelnen Tabs die Werte zu.
Danach bekommen diese einen Hintergrund und eine Höhe.
Die h3 Tags bekommen einen z-index von drei, sodass wir sicher gehen können, dass sie immer über allen anderen stehen. Außerdem bekommen diese eine absolute Position, sodass sie immer über den Tabs stehen.

Nun kommen die Hover

#csstabs:hover h3,
#csstabs:focus h3,
#csstabs:active h3{
background:none;
}
#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:#fff;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
}
#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:#fff;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
}

Als erstes verlieren alle h3 Tags ihren Hintergrund, sobald wir über einen div Container mit der Maus fahren. Tab1 sowie Tab2 bekommen einen z-index von drei, sodass beide Elemente im Vordergrund stehen.

CSS3

Aber was ist das? Du hast einen webkit Browser? Wie wäre es mit ein paar CSS3 Tricks. Es ist nicht viel, aber ein kleiner Fade zwischen den einzelnen Tabs wäre doch super oder?

Als erstes geben wir jeden .tabcontent ein opacity:0 die zunächst nicht angezeigt werden.

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}

Dann füge diese Zeile unter der #csstabs:hover h3 ein.

#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}

Das wird den .tabcontent mit einem Fade Effekt von 0.75 Sekunden animieren.

Abschliessend benötigen wir für den .tabcontent noch ein Fade in.

#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

Das wird den .tabcontent einblenden, während dieser innerhalb von zwei Sekunden verblasst.

Das wars, nun solltet Ihr einen funktionierenden Tab haben, der ohne Javascript funktioniert und die neuen CSS3 Techniken nutzt.