CSS Tabs ohne Javascript

CSS tabs ohne Javascript

Tabbed Nagivation oder einfach »Tabs« ist ein Menü oder Navigation innerhalb der Seite. Tabs oder Panels sparen Platz und geben zusätzliche Informationen frei. Mit CSS funktioniert eine Navigation mit Tabs ohne Javascript. Nur zwei zusätzliche HTML-Tags befreien die Panels von Javascript: input type="radio" und label-Elemente.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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):

  • tabs-paris
    Bundestag

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

  • tabs-paris
    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!

  • tabs-paris
    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.

    CSS für Tabs mit Radio-Buttons
    /* 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.

    CSS für Tabs mit Radio-Buttons
    #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.

    Label als Beschriftung der Tabs
    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;
    }