Die Navigation auf Webseiten ist eine Form einer Liste, und die Navigation mit Registerkarten gleicht einer horizontalen Liste. Es ist relativ einfach, eine horizontale Tabbed-Navigation mit CSS zu erstellen. CSS 3 bietet jedoch einige weitere Tools, mit denen sie noch schöner aussehen.
Dieses Tutorial führt Sie durch die HTML- und CSS-Elemente, die zum Erstellen eines Registers mit CSS-Registerkarten erforderlich sind. Klicken Sie auf diesen Link, um zu sehen, wie es aussehen wird.
Dieses Menü mit Registerkarten verwendetkeine bilder, nur HTML und CSS 2 und CSS 3. Es kann leicht bearbeitet werden, um weitere Registerkarten hinzuzufügen oder den Text darin zu ändern.
Browser-Unterstützung
Dieses Tab-Menü funktioniert inalle gängigen Browser. Internet Explorer zeigt die abgerundeten Ecken nicht an, aber ansonsten werden Registerkarten wie Firefox, Safari, Opera und Chrome angezeigt.
Schreiben Sie Ihre Menüliste
Alle Navigationsmenüs und Registerkarten sind eigentlich nur eine ungeordnete Liste. Das erste, was Sie tun möchten, ist, eine ungeordnete Liste von Links dahin zu schreiben, wohin Ihre Tabbed-Navigation gehen soll.
In diesem Lernprogramm wird davon ausgegangen, dass Sie Ihren HTML-Code in einem Texteditor schreiben und wissen, wo der HTML-Code für Ihr Menü auf Ihrer Webseite platziert werden soll.
Schreiben Sie Ihre ungeordnete Liste so:
class = "tablist">CSS 3id = "current"> TabsZumMenüs
class = "tablist"undid = "aktuell".Das erste ist erforderlich. Wenn Sie das nicht setzenTablistKlasse in Ihrer ungeordneten Liste funktionieren die Registerkarten nicht. Der zweite ist optional. Lege dasid = "aktuell"auf welcher Registerkarte Sie auf dieser Seite hervorgehoben werden möchten. Normalerweise verwenden wir diese Option, um die Seite hervorzuheben, auf der wir uns befinden. Sie können jedoch auch die wichtigste Registerkarte hervorheben. Oder Sie können es vollständig entfernen.
Beginnen Sie mit der Bearbeitung Ihres Stylesheets
Sie können entweder ein externes Stylesheet oder ein internes Stylesheet verwenden. Die Beispielmenüseite verwendet ein internes Stylesheet im
des Dokuments.Zuerst werden wir den UL selbst gestalten
Hier benutzen wir die KlasseTablist im HTML. Anstatt das UL-Tag zu gestalten, das alle ungeordneten Listen auf Ihrer Seite formatieren würde, sollten Sie nur die UL-Klasse formatieren.Tablist Der erste Eintrag in Ihrem CSS sollte also sein:
.tablist {}
Wir möchten die abschließende geschweifte Klammer (}) im Voraus einfügen, so dass wir sie später nicht vergessen.
Wir verwenden zwar ein ungeordnetes List-Tag für die Registerkartenmenüs, möchten jedoch keine Aufzählungszeichen oder Zahlen. Die erste Art, die Sie hinzufügen sollten, ist.Listenstil: keine; Dies teilt dem Browser mit, dass es sich bei der Liste zwar um eine Liste ohne vorgegebene Stile (wie Aufzählungszeichen oder Zahlen) handelt.
Anschließend können Sie die Höhe Ihrer Liste an den Platz anpassen, den Sie füllen möchten. Wir haben 2em für unsere Höhe gewählt, da dies die doppelte Standardschriftgröße ist und ungefähr ein halbes Em über und unter dem Text der Registerkarte steht. DasHöhe: 2em; Sie können Ihre Breite jedoch auf jede gewünschte Größe einstellen. UL-Tags beanspruchen automatisch 100% der Breite. Wenn Sie also nicht möchten, dass der Container kleiner als der aktuelle Container ist, können Sie die Breite weglassen.
Wenn Ihr Master-Stylesheet keine Voreinstellungen für UL- und OL-Tags enthält, sollten Sie sie schließlich einfügen. Dies bedeutet, dass Sie die Ränder, Ränder und Füllungen in Ihrem UL deaktivieren sollten. Polsterung: 0; Marge: 0; Grenze: keine; Wenn Sie das UL-Tag bereits zurückgesetzt haben, können Sie die Ränder, den Abstand oder den Rand so anpassen, dass er zu Ihrem Design passt.
Ihre letzte .tablist-Klasse sollte folgendermaßen aussehen:
.tablist {list-style: none; Höhe: 2em; Polsterung: 0; Marge: 0; Grenze: keine; }
Bearbeiten der LI-Listenelemente
Nachdem Sie Ihre ungeordnete Liste gestylt haben, müssen Sie die LI-Tags darin formatieren. Ansonsten verhalten sie sich wie eine Standardliste und gehen jeweils zur nächsten Zeile über, ohne die Tabs richtig zu platzieren.
Richten Sie zunächst Ihre Stileigenschaft ein:
.tablist li {}
Dann möchten Sie Ihre Registerkarten so verschieben, dass sie auf der horizontalen Ebene liegen. Schwimmer: links;
Und vergessen Sie nicht, einen Rand zwischen den Registerkarten hinzuzufügen, damit sie nicht zusammengefügt werden. Rand rechts: 0,13 em;
Ihre Li-Styles sollten so aussehen:
.tablist li {float: left; Rand rechts: 0,13 em; }
Die Registerkarten wie Registerkarten mit CSS 3 aussehen lassen
Um den Großteil der Arbeit in diesem Stylesheet zu erledigen, zielen wir auf die Links in der ungeordneten Liste. Browser erkennen an, dass Links auf einer Webseite mehr bewirken als andere Tags. Es ist daher einfacher, ältere Browser dazu zu bringen, Dinge wie den Hover-Status einzuhalten, wenn sie an den Anker-Tag (Links) angehängt werden. Schreiben Sie also zuerst Ihre Stileigenschaften:
.tablist li a {} .tablist li a: hover {}
Da diese Registerkarten in einer Anwendung wie Registerkarten fungieren sollen, soll der gesamte Bereich der Registerkarte anklickbar sein, nicht nur der verknüpfte Text. Dazu müssen Sie den A-Tag aus seinem normalen "Inline" -Zustand in ein Blockelement umwandeln. Bildschirmsperre; (Wenn Sie mehr über den Unterschied erfahren möchten, lesen Sie Block-Level vs. Inline-Elemente.)
Eine einfache Möglichkeit, Ihre Registerkarten zu zwingen, symmetrisch zu sein, aber trotzdem an die Breite des Textes anpassen, besteht darin, die rechte und linke Auffüllung gleich zu machen. Wir haben die Padding-Abkürzungseigenschaft verwendet, um den oberen und unteren Wert auf 0 und rechts und links auf 1em festzulegen. Polsterung: 0 1em;
Wir haben uns auch dafür entschieden, die Link-Unterstreichungen zu entfernen, damit die Registerkarten weniger wie Links aussehen.Aber wenn Ihr Publikum dadurch verwirrt sein könnte, lassen Sie diese Zeile aus. Link-Deko: keine;
Wenn Sie die Registerkarten mit einem dünnen Rand versehen, wirken sie wie Registerkarten. Wir haben die Grenzekürzel-Eigenschaft verwendet, um die Grenze um alle vier Seiten herum zu setzen Grenze: 0,06% fest # 000; Und dann die Border-Bottom-Eigenschaft verwendet, um sie von unten zu entfernen. Rand unten: 0;
Anschließend haben wir einige Änderungen an der Schriftart, Farbe und Hintergrundfarbe der Registerkarten vorgenommen. Stellen Sie diese auf die Stile ein, die zu Ihrer Site passen. font: Fett 0.88em / 2em arial, genf, helvetica, serifenlos; Farbe: # 000; Hintergrundfarbe: #ccc;
Alle oben genannten Stile sollten in die Auswahl übernommen werden.tablist li adie Regel, so dass sie die Ankertags im Allgemeinen beeinflussen. Um die Registerkarten anklickbarer zu machen, sollten Sie einige Statusregeln hinzufügen.tablist li a: hover.
Wir möchten die Farbe des Textes und des Hintergrunds ändern, damit die Registerkarte beim Klicken mit der Maus angezeigt wird. Hintergrund: # 3cf; Farbe: #fff;
Wir haben den Browsern eine weitere Erinnerung hinzugefügt, dass der Link nicht unterstrichen bleiben soll. Textdekoration: keine; Eine andere übliche Methode ist, die Unterstreichung wieder zu aktivieren, wenn Sie mit der Maus über die Registerkarte fahren. Wenn Sie das tun möchten, ändern Sie es in Textdekoration: Unterstrichen;
Aber wo ist das CSS 3?
Wenn Sie aufgepasst haben, haben Sie wahrscheinlich bemerkt, dass im Stylesheet keine CSS 3-Stile verwendet wurden. Dies hat den Vorteil, dass Sie in jedem modernen Browser arbeiten können, einschließlich Internet Explorer. Aber es sieht nicht so aus, als würden die Registerkarten mehr als quadratische Felder aussehen. Durch das Hinzufügen eines Aufrufbereichs mit einem CSS-3-Stil (und den zugehörigen browserspezifischen Aufrufen) können Sie die Kanten abgerundet machen, sodass sie wie Registerkarten in einem Manila-Ordner aussehen.
Die Stile, die Sie dem hinzufügen sollten .tablist li a Regel sind: -webkit-border-top-right-radius: 0,50 em; -webkit-border-top-left-radius: 0,50 em; -moz-border-radius-topright: 0,50 em; -moz-border-radius-topleft: 0,50 em; Rand oben rechts Radius: 0,50 em; Rand oben links Radius: 0,50 em;
Dies sind die endgültigen Stilregeln, die wir geschrieben haben:
.tablist li a {display: block; Polsterung: 0 1em; Textdekoration: keine; Grenze: 0,06% fest # 000; Rand unten: 0; font: Fett 0.88em / 2em arial, genf, helvetica, serifenlos; Farbe: # 000; Hintergrundfarbe: #ccc; / * CSS 3-Elemente * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0,50 em; -moz-border-radius-topright: 0,50 em; -moz-border-radius-topleft: 0,50 em; Rand oben rechts Radius: 0,50 em; Rand oben links Radius: 0,50 em; } .tablist li a: hover {background: # 3cf; Farbe: #fff; Textdekoration: keine; }
Mit diesen Stilen verfügen Sie über ein Menü mit Registerkarten, das in allen gängigen Browsern funktioniert und in CSS 3-kompatiblen Browsern wie gedruckte Registerkarten aussieht. Auf der nächsten Seite haben Sie eine weitere Option, mit der Sie das Ganze noch mehr verkleiden können.
Markieren Sie die aktuelle Registerkarte
In dem von uns erstellten HTML hatte der UL ein Listenelement mit einer ID. Auf diese Weise können Sie einem LI einen anderen Stil zuweisen. Die häufigste Situation ist, die aktuelle Registerkarte in gewisser Weise hervorzuheben. Eine andere Möglichkeit, sich dies vorzustellen, besteht darin, dass Sie die Tabs, die nicht live sind, ausblenden möchten. Sie ändern dann, wo sich die ID auf den verschiedenen Seiten befindet.
Wir gestalten sowohl das #current-A-Tag als auch das #current-A: hover -Stat, so dass beide etwas unterschiedlich sind. Sie können die Farbe, Hintergrundfarbe und sogar Höhe, Breite und Auffüllung dieses Elements ändern. Nehmen Sie alle Änderungen vor, die in Ihrem Design sinnvoll sind.
.tablist li # current a {Hintergrundfarbe: # 777; Farbe: #fff; } .tablist li # current a: hover {background: # 39C; }
Und du bist fertig! Sie haben gerade ein Tabbed-Menü für Ihre Website erstellt.
