CSS Tabs ohne Javascript

input type radio und label

Tabs sind eine beliebte und intuitive Komponente der Benutzerschnittstellen von mobilen Geräten. Sie lassen den Benutzer schnell zwischen einer kleinen Auswahl gleich wichtiger Informationen navigieren. Der Begriff Tabs steht übrigens für Registerkarten: Karteikästen mit Registerreitern (den hoch gestellten Buchstaben), Register in Aktenordnern und Hängeregistraturen.

Wie auch das CSS-Accordion basiert die tabbed Nagivation auf dem Checkbox-Hack input type="radio". Ist der Zustand des input-Felds checked, öffnet sich das jeweilige Panel. input type radio bietet mehrere Optionen, läßt aber automatisch immer nur eine Option zu einer Zeit zu.

Was ein Amerikaner über europäische Hauptstädte sagt (Zitate von Mark Twain):

Berlin London Paris

Bundestag

The telephone service here is also excellent. I would like to compare it with ours, if we had one.

Big Ben

There is no such thing as the Queen’s English. The property has gone into the hands of a joint stock company and we own the bulk of the shares!

Eiffeltum

In Paris they just simply opened their eyes and stared when we spoke to them in French! We never did succeed in making those idiots understand their own language.

HTML für Tabs

Das HTML ist ein Leichtgewicht, anstelle von Javascript wirken input- und label-Elemente. Dazu kommt das HTML-menu-Tag, das wie eine ungeordnete Liste ul funktioniert: li-Tags legen die Inhalte fest. Der Unterschied ist marginal, aber das menu-Element ist für dynamische Elemente innerhalb der Seite gedacht, während ul-Elemente eher für die Navigation zwischen verschiedenen Seiten benutzt werden.

<div class="tabbed">
	<input checked="checked" id="tab1" type="radio" name="tabs">
	<input id="tab2" type="radio" name="tabs">
	<input id="tab3" type="radio" name="tabs">

	<div class="nav">
		<label for="tab1">Berlin</label>
		<label for="tab2">London</label>
		<label for="tab3">Paris</label>
	</div>
	
	<menu>
		<li class="tab1"> … </li>
		<li class="tab2"> … </li>
		<li class="tab3"> … </li>
	</menu>
</div>

CSS für Tabs

.tabbed menu ist der Körper der Tabs und ist anfangs mit display:none von der Anzeige ausgeschlossen.

/* Tabs mit radio-Buttons */
.tabbed menu { 
	list-style-type: none;
}

.tabbed > input,
.tabbed menu li {
	display: none;
}

.tabbed menu>li {
  padding: 20px;
  width: 100%;
  border: 1px solid silver;
  background: hsl(200,40%,96%);
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}

Element mit Kontext-Selektor wählen

Das Tilde-Zeichen ~ erzeugt einen Subsequent-sibling Combinator, locker übersetzt mit Indirekter Nachbar-Selektor.

Ein Klick auf ein label-Element des jeweiligen input-Tags schaltet den Radiobutton in den Zustand checked und das menu-Element wird sichtbar.

#tab1:checked ~ menu .tab1,
#tab2:checked ~ menu .tab2,
#tab3:checked ~ menu .tab3 {
  display: flex; 
  justify-content: space-between; 
  padding-bottom: 2em; 
}

label-Elemente mit dem for-Attribut, das zum jeweiligen input-Tag passt, reagieren zusammen mit den input-Elementen, auch wenn die Radio-Buttons mit display:none nicht eingespielt werden.

Das übrige CSS stylt die Label: setzt die Hintergrundfarbe des aktiven Labels und entfernt border-bottom unter dem aktiven Label.

nav label {
   float: left;
   padding: 15px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   background: hsl(210,50%,50%);
   color: #eee;
}

nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background: #ffffff; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}