Navigation på websider er en form for en liste, og fanebladnavigation er som en vandret liste. Det er ret nemt at oprette vandret fanebladnavigering med CSS, men CSS 3 giver os nogle få flere værktøjer til at få dem til at se endnu pænere ud.
Denne vejledning tager dig gennem HTML og CSS, der er nødvendige for at oprette en CSS-faneblad. Klik på det link for at se, hvordan det vil se ud.
Denne faneblad brugeringen billeder, kun HTML og CSS 2 og CSS 3. Det kan nemt redigeres for at tilføje flere faner eller ændre teksten i dem.
Browser Support
Denne faneblad vil fungerealle større browsere. Internet Explorer viser ikke de afrundede hjørner, men ellers vil det vise faner ligesom Firefox, Safari, Opera og Chrome.
Skriv din menu liste
Alle navigeringsmenuer og faner er egentlig bare en uordnet liste. Så det første du vil gøre er at skrive en uordnet liste over links til, hvor du vil have din tabbed navigation.
Denne vejledning forudsætter, at du skriver din HTML i en teksteditor, og at du ved, hvor du skal placere HTML'en til din menu på din webside.
Skriv din uordnede liste som denne:
class = "tablist">CSS 3id = "nuværende"> TabsTilMenuer
class = "tablist"ogid = "nuværende".Den første er påkrævet. Hvis du ikke sættertablistklasse på din uordnede liste, vil fanerne ikke fungere. Det andet er valgfrit. Put denid = "nuværende"på hvilken fane du vil fremhæve på den pågældende side. Vi bruger normalt dette til at fremhæve den side, vi er på, men du kan bruge den til at fremhæve den vigtigste fane. Eller du kan fjerne det helt.
Start redigering af dit stilark
Du kan bruge enten et eksternt stilark eller et internt stilark. Eksempelmenu-siden bruger et internt stilark i
af dokumentet.Først vil vi stille UL'en selv
Det er her, vi bruger klassentablist .I HTML. I stedet for at udforme UL-taggen, som ville stile alle uordnede lister på din side, skal du kun style UL-klassen.tablist Så den første post i din CSS skal være:
.tablist {}
Vi kan godt lide at sætte den endelige curly brace (}) i forvejen, så vi glemmer det ikke senere.
Mens vi bruger en uordnet listelabel til fanebladet, men vi vil ikke have nogen kugler eller tal, der kryber ind. Så den første stil du skal tilføje er.liste-stil: none; Dette fortæller browseren, at mens det er en liste, er det en liste uden forudbestemte stilarter (som kugler eller tal).
Derefter kan du angive højden på din liste for at matche det rum, du vil have det til at udfylde. Vi valgte 2em for vores højde, da det er dobbelt standard skriftstørrelse, og giver ca. halvdelen em over og under teksten af fanen.højde: 2em; Men du kan indstille din bredde til den størrelse du vil have. UL tags tager automatisk op på 100% af bredden, så medmindre du vil have det mindre end den nuværende beholder, kan du lade bredden ud.
Endelig, hvis dit master stylesheet ikke har forudindstillinger for UL- og OL-tags, vil du gerne sætte dem ind. Det betyder at du skal slukke for grænserne, margenerne og polstring på din UL. padding: 0; margin: 0; grænse: ingen; Hvis du allerede har nulstillet UL-mærket, kan du ændre margenerne, polstring eller grænsen til noget, der passer til dit design.
Din endelige .tablist klasse skal se sådan ud:
.tablist {listestil: none; højde: 2em; padding: 0; margin: 0; grænse: ingen; }
Redigering af LI-listeposterne
Når du har stylet din uordnede liste, skal du indstille LI-tagsne inde i den. Ellers vil de fungere som en standardliste og hver flytning til den næste linje uden at placere dine faner korrekt.
Først skal du oprette din stilegenskab:
.tablist li {}
Så vil du flyde dine faner, så de står op på vandret plan. flyde: venstre;
Og glem ikke at tilføje noget margen mellem fanerne, så de ikke smelter sammen. margin-højre: 0.13em;
Dine li-stilarter skal se sådan ud:
.tablist li {float: left; margin-højre: 0.13em; }
Gør fanerne ligne faner med CSS 3
For at gøre det meste af det tunge løft i dette stilark, målretter vi linkene inden for den uordnede liste. Browsere genkender, at links gør mere på en webside end andre tags, så det er nemmere at få ældre browsere til at overholde ting som hover-stater, hvis du vedhæfter dem til ankeretiketten (links). Så først skriv dine stilegenskaber:
.tablist li a {} .tablist li a: hover {}
Fordi disse faner skal fungere som faner i en applikation, vil du have hele området på fanen til at klikke, ikke kun den linkede tekst. For at gøre dette skal du konvertere A-mærket fra det normale "inline" -tilstand til et blokelement. display: block; (Hvis du er interesseret i at vide mere om forskellen, skal du læse Block-Level vs Inline Elements.)
Derefter er en nem måde at tvinge dine faner til at være symmetrisk med hinanden, men er stadig fleksible for at passe til bredden af teksten, så den højre og venstre polstring gør det samme. Vi brugte den polstrede stenografiegenskab til at indstille toppen og bunden til 0 og højre og venstre til 1em. polstring: 0 1em;
Vi valgte også at fjerne linket understreger, så fanerne ser mindre ud som links.Men hvis dit publikum kan blive forvirret af det, skal du udelade denne linje. link-dekoration: ingen;
Ved at lægge en tynd kant rundt på fanerne, får den dem til at ligne faner. Vi brugte grænsekorthorthandelen til at sætte grænsen rundt om alle fire sider grænse: 0,06em fast # 000; Og så brugt den bundbundne egenskab for at fjerne den fra bunden. border-bottom: 0;
Derefter lavede vi nogle tilpasninger til fanernes skrifttype, farve og baggrundsfarve. Indstil disse til de stilarter, der matcher dit websted. skrifttype: fed 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;
Alle ovennævnte stilarter skal gå i vælgeren.tablist li areglen, så de påvirker ankeretiketterne generelt. Så for at få fanerne til at blive mere klikbare, skal du tilføje et par statsregler.tablist li a: hover.
Vi kan lide at ændre farven på teksten og baggrunden for at gøre fanen pop, når du musen over den. baggrund: # 3CF; farve: #fff;
Og vi inkluderede en anden påmindelse til de browsere, som vi ønsker, at linket ikke skal understreges. tekst-dekoration: ingen; En anden almindelig metode er at dreje underlaget tilbage, når du musen over fanen. Hvis du vil gøre det, skal du ændre det til tekst-dekoration: understrege,
Men hvor er CSS 3?
Hvis du har været opmærksom, har du sikkert bemærket, at der ikke har været nogen CSS 3-stilarter, der bruges i stilarket. Dette har den fordel at arbejde i enhver moderne browser, herunder Internet Explorer. Men det gør ikke flapperne ligne noget mere end firkantede kasser. Ved at tilføje en CSS 3 Style Call-radius (og de tilhørende browserspecifikke opkald) kan du gøre kanterne afrundet, for at se mere ud som faner på en manila-mappe.
De stilarter du skal tilføje til .tablist li a reglen er: -webkit-border-top-højre-radius: 0.50em; -webkit-border-top-venstre-radius: 0.50em; moz-border-radius-topright: 0.50em; moz-border-radius-topleft: 0.50em; border-top-højre-radius: 0.50em; border-top-venstre-radius: 0.50em;
Dette er de sidste stilregler, vi skrev:
.tablist li a {display: block; polstring: 0 1em; tekst-dekoration: ingen; grænse: 0,06em fast # 000; border-bottom: 0; skrifttype: fed 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementer * / webkit-grænse-top-højre-radius: 0.50em; -webkit-border-top-venstre-radius: 0.50em; moz-border-radius-topright: 0.50em; moz-border-radius-topleft: 0.50em; border-top-højre-radius: 0.50em; border-top-venstre-radius: 0.50em; } .tablist li a: hover {background: # 3cf; farve: #fff; tekst-dekoration: ingen; }
Med disse stilarter har du en faneblad, der fungerer i alle større browsere og ligner flotte udskrevne faner i CSS 3-kompatible browsere. Den næste side giver dig en ekstra mulighed, du kan bruge til at klæde det op endnu mere.
Fremhæv fanebladet Nuværende
I den HTML, vi oprettede, havde UL et listelement med et ID. Dette giver dig mulighed for at give en LI en anden stil fra resten. Den mest almindelige situation er at gøre den aktuelle fane skiller sig ud på en eller anden måde. En anden måde at tænke på dette er, at du vil gråte ud de faner, der ikke er levende. Du ændrer derefter, hvor id'et er på de forskellige sider.
Vi stiler både #strøm A-taggen såvel som #strømmen A: hover sta, så begge er lidt anderledes. Du kan ændre farven, baggrundsfarven, selv højden, bredden og polstring af det pågældende element. Gør det, som forandringer giver mening i dit design.
.tablist li # current a {baggrundsfarve: # 777; farve: #fff; } .tablist li # current a: svinger {baggrund: # 39C; }
Og du er færdig! Du har netop oprettet en faneblad til din hjemmeside.
