CSS Tabs, HTML Dog
Tabbed Navigation von Listenelementen und dollops von CSS gemacht
Tabs müssen nicht horizontal sein, aber sie sind in der Regel so unser erster Schritt sein wird, eine horizontale Liste zu erstellen.
Wir werden ein paar anderen Dinge mit CSS, um zu versuchen, aber wir werden mit der folgenden grundlegenden HTML-Struktur kleben:
Nun, was wollen wir mit diesem HTML zu tun ist, wird jedes Listenelement in eine Registerkarte drehen, mit dem gewählten Artikel erscheint Teil des entsprechenden Content-Bereichs zu sein.
Nun uns an die Arbeit ...
Inline-Liste-Artikel
Das naheliegendste erste, was wir tun können, ist die Liste horizontal machen. Die Straight-Forward-Lösung hierfür ist die Anzeigeeigenschaft der Boxen durch die li-Elemente auf Inline erstellt einzustellen:
Jetzt können wir die Dinge ein wenig aufgeräumter machen, indem die ein Element Boxen Polsterung aus.
Einstellen der Polsterung der ein Element-Box, anstatt die li-Element-Boxen hat den Vorteil, die gesamte Breite der Lasche anklickbar zu machen.
Bis jetzt sind die Laschen sitzen nicht auf etwas, so dass wir einen Rahmen zum Inhalt Abschnitt hinzufügen:
Aber es ist eine wesentliche Sache fehlt. Wie es ist, sitzen die Laschen nur über den oberen Teil der Content-Box, die alle so ziemlich das gleiche suchen. Was wir tun müssen, ist die „aktive“ Reiter machen - die, die wir sind auf der Seite bezieht sich - aussehen, als ob es Teil des Content-Box, wie ein Reiter auf der Seite einer Trennkarte.
Da vertikale Polsterung in Inline-Boxen ist eigentlich nichts schieben um ihn herum, können wir einfach dies tun:
Diese Pads den Boden der Li-Element-Box mit der „ausgewählten“ ID von einem Pixel, die sie über den oberen Rand des Inhaltsfeldes drückt. Da die Hintergrundfarbe weiß ist (vorausgesetzt, die Hintergrundfarbe der Content-Box ist auch weiß) es gibt die Illusion, dass die Lasche und ihre Grenze, ist Teil der Content-Box.
Einfache Tabs display: inline
Schwammen list-Artikel
Wenn wir also etwas ein wenig funkier mit den Registerkarten tun wollen, müssen wir die Listenelemente eine andere Art und Weise horizontalize:
Es ist das gleiche wie zuvor, außer dass anstelle die Li-Element-Boxen Anzeige Inline werden wir sie nach links schwimmen.
Wir sind fast da mit dieser Methode, sondern Polsterung an den ausgewählten Listenelement der Anwendung, wie wir mit dem Inline-Listenelement Ansatz hat (was hier würde nur Pad Dinge, weil ein schwebte Feld einen „Block“ Anzeigetyp hat), wir sind geht die ganze Sache heben und klatschen sie nach unten ein Pixel:
Ein weiterer Ansatz zur Ring Kontrolle über die Größe der Tabs ist Anzeige zu verwenden: inline-block.
Die Dinge schöner aussehen ...
Es gibt wenig Dinge, die wir diese Tabs so besser aussehen lassen tun können, um die Unterstreichungen als entfernen, verschiedene Farben für Grenzen Bereitstellung, Änderung der Hintergrundfarben, wenn etc schwebt, die die Laschen unterscheidbare mehr machen kann und die „aktive“ Registerkarte offensichtlicher.
Herumspielen
Natürlich Registerkarten müssen nicht sein, wie borderific wie die obigen Beispiele. Die wichtigsten Grundsätze gleich bleiben - Sie stellen Ihre horizontalen Listenelemente und dann Stil, wie Sie bitte.
Sie können nur Tabs getrennt durch feste Hintergrundfarben. Alternativ kann ein einfacher Trick, von Dan Cederholm zauberte ist die untere Grenze eines Listenelements zu manipulieren dünne vorragende Laschen zu erzeugen.
Und Registerkarten zu 90-Grad-Ecken haben nicht kantig, auch nicht. Anwenden von border-radius in den oberen linken und rechten oberen Ecken jeder Registerkarte wird sie umso mehr wie jene Dividieren Karten machen wir so wollen, emulieren.