01 vum 06
Wéi et Tabert Navigation mat CSS a keng Biller erstallt
Navigatioun op Websäiten ass eng Form vun enger Lëscht, an d'Tabbedavigation ass wéi eng horizontal Lëscht. Et ass relativ einfach, horizontal Tabbednavigation mat CSS ze kreéieren, awer CSS 3 gitt eis e puer méi Tools, fir se och nach besser ze gesinn.
Dëse Tutorial wäert Iech duerch den HTML an CSS noutwenneg fir e CSS-Tabbed menge ze erstellen. Klickt op dee Link fir ze kucken wéi et ausgesäit.
Dëst Menü baséiert ze benotzen keng Biller , HTML an CSS 2 an CSS 3. Et kann nëmme liicht editéiert ginn fir méi Tabs ze änneren oder den Text ze änneren.
Browser Support
Dëst Tab menu kënnt an all grousse Browser . Internet Explorer net d'Ronnebunnen weisen, awer soss gëtt et Tabs wéi Firefox, Safari, Opera an Chrome.
02 vum 06
Schreift Är Menu Lëscht
All Navigatiounsmenüs a Tabs sinn just eng onerlaabter Lëscht. Also déi éischt Saach déi Dir wëllt maachen, schreift eng ongeuerdnet Lëscht vun Links op wou Dir Är Tabbednavigation wëllt goën.
Dës Tutorial ass ugeholl datt Dir Är HTML an engem Texteditor schreift an datt Dir wësst wou Dir d'HTML fir Äerem Menu op Är Websäit placéiert.
Schreift Är uerdentlech Lëscht wéi:
- class = "tablëscht">
- CSS 3
- id = "aktuell"> Tabs
- Fir
- Menuen
Dir kënnt feststellen datt den Code zwee Saachen rufft: class = "tablëscht" an id = "aktuell". Déi éischt ass néideg . Wann Dir d'Tabellengklass op Är unordered Lëscht gëtt, funktionnir d'Tabs net funktionnéieren. Déi zweet ass optional. Setzt d'id = "aktuell" op all d 'Tabulatur déi Dir gär hätt op dëser Säit markéiert. Ech benotzen ech normalerweis fir d'Säit ze markéieren déi ech sinn, awer Dir kënnt et benotze fir déi wichtegst Tab ze punkten. Oder Dir kënnt et komplett ofhuelen.
03 vum 06
Frësch
Dir kënnt och e externe Formblat oder e intern Stäissfilter benotzen . D'Beispiller-Menü-Säit benotzt en internen Stylblatt an der
vum Dokument.Éischtens Mir maache fir d'UL selwer
Dëst ass wou mir d'Tabelliste klickt. Am HTML. Vill méi wéi den UL-Tag ze styliséieren, wat all ongeordnete Lëschte vun Ärer Säit stil moduléiert, musst Dir nëmmen d'UL Klasse benotzen. Tabellëscht Also den éischte Poste bei Ärem CSS sollt sinn:
.tablist {}Ech wëll gär an d'Enn Curly Brace setzen ()) virun der Zäit, also ech vergiessen et net méi spéit.
Während mer eng ongeuerdnete Lëscht mat der Tab Menu list benotzen, awer mir wëllen keng Kugel oder Zuelen ukucken. Den éischte Stil sollt Dir och addéieren. Lëscht Lëscht: keng; Dëst erzielt den Browser, datt et eng Lëscht ass, et ass eng Lëscht mat véierméiglechsten Stiler (wéi Kugel oder Zuelen).
Da kënnt Dir d'Héicht vun Ärer Lëscht op de Weltraum setzen fir se ze füllen. Ech hat 2em fir meng Héicht gewielt, well dat ass duebel d'Standardschrëftgréisst, a gëtt ongeféier halleem em uewen an ënner dem Text vun der Tab. Héicht: 2em; Awer Dir kënnt Är Breet un all d'Gréisst uginn, déi Dir wëllt. UL Tags ginn automatesch op 100% vun der Breet, well ausser Dir wëllt et méi kleng sinn wéi de aktuelle Container, kënnt Dir d'Breet uewen verlassen.
Endlech, wann Är Meeschterstëpplaatz net virgesin fir UL oder OL Tags hutt, wëlle se se hunn. Dir kënnt Är Grenzen, Margen a Pollutioun op Är UL maachen. Ufëllen: 0; Spillraum: 0; Grenz: Keen; Wann Dir de UL-Tag schon zréckgesat hues, kanns de Margen, Padding oder d'Grenz ëmsetzen, wat mat Ärem Design passt.
Är lescht .tablist Klasse sollt kucken:
.tablist {list style: none; Héicht: 2em; Ufëllen: 0; Spillraum: 0; Grenz: Keen; }}04 vun 06
D'LI Lëscht Elemente änneren
Soubal Dir Är ungeuerdneter Lëscht styléiert hutt, musst Dir d'LI Tags intolséieren. Sinn, wäerten se esou wéi eng Standard Lëscht handelen an all Wee an d'nächst Zeil setzen, ouni Äert Tabs korrekt ze setzen.
Fir Äert Équipen Äre Stilemaart:
.tablist li {}Da wëllt Dir Är Tabs ze schéissen, fir datt se op der horizontaler Ebene liesen. fléien: lénks;
An vergiesst net datt Dir eng Spillplaz tëschent de Tabs fënnt, fir datt se net zesummen sinn zesummen. Rietsrang: 0,13em;
Är li Stiler soll esou ausgesäit:
.tablist li {float: lénks; Rietsrang: 0,13em; }}05 vum 06
D'Tabs ze léie Look Like Tabs mat CSS 3
Fir de gréissten Deel vun der schwiereger Héichheizung an dësem Stylblatt ze maachen, sinn ech op d'Links an der nët geuerdnete Lëscht gezielt. Browser erkennen datt Links méi op enger Websäit wéi aner Variatiounen eroflueden, sou datt et méi Browser méi erstallt gëtt fir Saachen wéi Hover-Staaten ze respektéieren wann se se op d'Verankerungstéck (Linken) befestigen. Also schreiwt éischtens Ären Stil Stil:
.tablist li a {} .tablist li a: hover {}Well dës Tabs sollten als Tabs an enger Applikatioun agoen, da wëllt de ganze Gebitt vum Tab klickbar, net nëmmen de verlinkte Text. Fir dëst ze maachen, musst Dir d'A-Tag vun engem normalen " Inline " -Standat ëmgoen an e Blockement . Ecran: block; (Wann Dir interesséiert sidd fir méi iwwert den Ënnerscheed ze wëssen, liesen Block-Level vs. Inline Elements .)
Dann, e einfache Wee fir Är Tabs ze symmetresch mateneen ze zwéngen, awer nach ëmmer flex ze passen fir d'Breet vum Text ze sinn déi richteg a lénks Padding déiselwecht ze maachen. Ech hunn d'Padding Shorthand Eigenschaft benotzt fir den Top a Bottom op den 0 an déi riets a lénks op 1em ze setzen. Ufro: 0 1em;
Ech hunn och gewielt fir de Link ze ënnerschreiden, sou datt d'Tabs net manner wéi Linken gesinn. Awer wann Dir Är Publikum duerch dës verwirrt ass, liesen dës Linn. Link-Deko: keng;
Duerch eng dënneg Grenz ëm d'Tabs, et mécht se wéi Tabs. Ech hunn d'Grenzkierchstäre benotzt fir d'Grenz ëm all véier Sides Grenz ze setzen: 0.06em solid # 000; An dunn hunn d' Grenzgänger Eegent benotzt fir aus der Uewen ze fuere ginn. D'Grenzgrenz: 0;
Duerno hunn ech puer Ännerunge fir d'Schrëft, d'Faarf an d'Hannergrondfaarw vun den Tabs gemaach. Setzt dës op den Stiler déi mat Ärem Site passen. Schrëft: fett 0.88em / 2em arial, geneva, helvetica, sans-serif; Faarf: # 000; Background-Faarf: #ccc;
All déi Stärebiller sollen an de Wähler goen .tablist li a, d'Regel, sou datt se d'Verankerungstonnen am allgemengen beaflossen. Dann fir de Tabs méi klickbar ze maachen, musst Dir e puer Staatsregel hinzufügen .tablist li a: hover.
Ech hu gär d'Faarf vum Text an den Hannergrond ze änneren, fir d'Tab ze populéieren wann Dir d'Maus iwwerholl huet. Hannergrond: # 3cf; color: #fff;
An ech hunn och eng Erënnerung un d'Browsere matgedeelt datt ech de Link bleiwe muss net ënnersträichen. Text-Dekor: Keen; Eng aner üblech Methode ass d'Underline zréck wann Dir d'Maus iwwer de Tabs gëtt. Wann Dir wëllt dat maachen, ännert se an Textdekoratioun: Ënnerstëtzung;
Awer wou ass de CSS 3?
Wann Dir eng Opmierksamkeet hutt, kënnt Dir wahrscheinlech feststellen datt et kee CSS 3 Stiler benotzt gouf, déi am Stilblatt benotzt ginn. Dëst huet den Avantage vun engem modernen Browser zu Schaffen an Internet Explorer. Mä et mécht d'Tabs net méi wéi eckeg Boxen. Wann Dir e CSS 3 Style-Call-Radius benotzt (an ass ass mat Browser-spezifeschen Uruff) Dir kënnt d'Ronnen gerundelt sinn, méi wéi de Tabs op engem Manila-Ordner ze kucken.
D'Stiler déi Dir sollt un d'Tablet li rëdden a Regel sinn: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-marketplace: 0.50em; Grenz-Top-Radius: 0.50em; Grenz-Top-Link-Radius: 0.50em;
Dëst sinn déi lescht Definitiounsregelen, déi ech geschriwwen hunn:
.tablist li a {display: block; Ufro: 0 1em; Text-Dekor: Keen; Grenz: 0.06em solid # 000; D'Grenzgrenz: 0; Schrëft: fett 0.88em / 2em arial, geneva, helvetica, sans-serif; Faarf: # 000; Background-Faarf: #ccc; / * CSS 3 Elementer * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-marketplace: 0.50em; Grenz-Top-Radius: 0.50em; Grenz-Top-Link-Radius: 0.50em; } .tablist li a: hover {background: # 3cf; color: #fff; Text-Dekor: Keen; }}Mat dësen Stiler, hutt Dir en Menu mat derbäi aginn, deen an all grousse Browser navigéiert a gesäit wéi flott gedréckte Tabs op CSS 3 mat kompatiblen Browseren. Déi nächst Säit gëtt Iech eng aner Optioun, déi Dir benotzt kann, fir méi nach ze maachen.
06 vum 06
Highlight den aktuellen Tab
Am HTML deen ech hunn erstallt, hat d'UL e Lëschteelektrelt mat enger ID. Dëst erméiglecht Iech e LI en anere Stil vum Rescht ze ginn. Déi bekanntst Situatioun ass déi aktuell Tab un engem Wee. Eng aner Manéier fir dëst ze denken, ass datt Dir graff wëll d'Tabs déi net lieweg sinn. Dir ännert d 'Iddi déi verschidde Säiten.
Ech stil béid der # Stroum A-Tag wéi och de # Stroum A: hover Sta, sou datt et zwou liicht ënnerschiddlech sinn. Dir kënnt d'Faarf, d'Hannergrond änneren, och d'Héicht, d'Breet an d'Fëllement vun deem Element. Maacht ëmmer Verännerungen an Ärem Konzept sinn.
.tablist li # aktuelle {background-color: # 777; color: #fff; } .tablist li # current a: hover {background: # 39C; }}An Dir sidd gemaach! Dir hutt just e Menu fir Är Websäit erstallt.