Slik oppretter du tabbed navigasjon med CSS og ingen bilder

Navigering på nettsider er en form for en liste, og tabbnavigering er som en horisontal liste. Det er ganske enkelt å lage horisontal tabbed navigasjon med CSS, men CSS 3 gir oss noen flere verktøy for å få dem til å se enda bedre ut.

Denne opplæringen tar deg gjennom HTML og CSS som trengs for å lage en CSS tabbed-meny. Klikk på den linken for å se hvordan den ser ut.

Denne tabbed menyen brukeringen bilder, bare HTML og CSS 2 og CSS 3. Det kan enkelt redigeres for å legge til flere faner eller endre teksten i dem.

Nettleserstøtte

Denne fanemenyen vil fungerealle de store nettleserne. Internet Explorer vil ikke vise avrundede hjørner, men ellers vil det vise faner som Firefox, Safari, Opera og Chrome.

Skriv din menyliste

Alle navigeringsmenyer og faner er egentlig bare en uordnet liste. Så det første du vil gjøre er å skrive en uordnet liste over koblinger til hvor du vil at din navigasjon skal gå.

Denne opplæringen antas at du skriver HTML-en din i en tekstredigerer, og at du vet hvor du skal plassere HTML-en for menyen på websiden din.

Skriv din uordnede liste slik:

• class = "finalist">
  • CSS 3
  • id = "aktuelle"> Kategorier
  • Til
  • menyer
  Du vil legge merke til at koden kaller to ting: class = "finalist" og id = "dagens". Den første er nødvendig. Hvis du ikke legger finalist klassen på din uordnede liste, vil fanene ikke fungere. Den andre er valgfri. Sett id = "dagens" På hvilken kategorien du vil bli uthevet på den siden. Vi bruker vanligvis dette til å markere siden vi er på, men du kan bruke den til å markere den viktigste kategorien. Eller du kan fjerne den helt.

Begynn å redigere stilarket ditt

Du kan bruke enten et eksternt stilark eller et internt stilark. Eksempelmenysiden bruker et internt stilark i av dokumentet.

Først vil vi stile UL selv

Det er her vi bruker klassenfinalist .I HTML. I stedet for å utforme UL-taggen, som ville utforme alle uordnede lister på siden din, bør du bare style UL-klassen.finalist Så den første oppføringen i CSS skal være:

.tablist {}

Vi liker å sette inn den endelige krøllebøylen (}) på forhånd, slik at vi ikke glemmer det senere.

Mens vi bruker en uordnet listelabel for kategorien Tabellmeny, men vi vil ikke ha noen kuler eller tall som kryper inn. Så den første stilen du bør legge til er.list-style: none; Dette forteller nettleseren at mens det er en liste, er det en liste uten forhåndsbestemte stiler (som kuler eller tall).

Deretter kan du angi høyden på listen din for å matche rommet du vil fylle. Vi valgte 2em for vår høyde, da det er dobbelt standard skriftstørrelse, og gir omtrent en halv em over og under teksten til fanen.høyde: 2-em; Men du kan angi bredden din til hvilken størrelse du vil. UL-tagger vil automatisk ta opp 100% av bredden, så med mindre du vil at den skal være mindre enn den nåværende beholderen, kan du legge bredden ut.

Endelig, hvis master-stilarket ikke har forhåndsinnstillinger for UL- og OL-koder, vil du ønske å sette dem inn. Dette betyr at du bør slå av grensene, margene og polstringene på UL-en. padding: 0; margin: 0; grense: ingen; Hvis du allerede har tilbakestilt UL-taggen, kan du endre margene, polstringen eller grensen til noe som passer med designet.

Din siste .tablist-klasse skal se slik ut:

.tablist {listestil: none; høyde: 2-em; padding: 0; margin: 0; grense: ingen; }

Redigere LI-listepostene

Når du har stylet din uordnede liste, må du utforme LI-kodene i den. Ellers vil de opptre som en standardliste og hver flytting til neste linje uten å plassere kategoriene dine riktig.

Først sett opp din stilegenskap:

.tablist li {}

Da vil du flyte flikene dine slik at de rager opp på horisontalplanet. float: venstre;

Og ikke glem å legge til noen margin mellom fanene, slik at de ikke fusjonerer sammen. margin-right: 0.13em;

Din Li-stiler bør se slik ut:

.tablist li {float: left; margin-right: 0.13em; }

Gjøre fanene ser ut som faner med CSS 3

For å gjøre det meste av den tunge løftingen i dette stilarket, målretter vi på koblingene i den uordnede listen. Nettlesere gjenkjenner at koblinger gjør mer på en nettside enn andre tagger, så det er lettere å bli eldre nettlesere for å overholde ting som hover-stater hvis du legger dem til ankermerket (koblinger). Så først skriv stilegenskapene dine:

.tablist li a {} .tablist li a: hover {}

Fordi disse kategoriene skal fungere som faner i et program, vil du at hele området av fanen skal kunne klikkes, ikke bare den koblede teksten. For å gjøre dette må du konvertere A-taggen fra den normale "inline" -standarden til et blokkelement. display: block; (Hvis du er interessert i å vite mer om forskjellen, les Block-Level vs Inline Elements.)

Deretter kan en enkel måte å tvinge tappene dine til å være symmetriske med hverandre, men likevel bøyes for å passe til bredden på teksten, slik at høyre og venstre polstring blir det samme. Vi brukte padding shorthand egenskapen å sette toppen og bunnen til 0 og høyre og venstre til 1em. polstring: 0 1em;

Vi valgte også å fjerne linken understreker, slik at kategoriene ser mindre ut som koblinger.Men hvis publikum kan bli forvirret av det, legg ut denne linjen. link-decoration: none;

Ved å sette en tynn kant rundt fanene, får de dem til å se ut som faner. Vi brukte grensen shorthand eiendom å sette grensen rundt alle fire sider border: 0.06em solid # 000; Og så brukte den grensebunnen egenskapen for å fjerne den fra bunnen. nedre kant: 0;

Deretter gjorde vi noen justeringer av fargene, farge og bakgrunnsfarge på fanene. Sett disse til stilene som samsvarer med nettstedet ditt. font: dristig 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;

Alle de ovennevnte stilene skal gå i velgeren.tablist li a, regelen slik at de påvirker ankeretikettene generelt. For å gjøre kategoriene mer klikkbare, bør du legge til noen statstyre.tablist li a: hover.

Vi liker å endre fargen på teksten og bakgrunnen for å få tabellen pop når du musen over den. bakgrunn: # 3cf; farge: #fff;

Og vi inkluderte en annen påminnelse til nettleserne som vi vil at linken ikke skal være understreket. text-decoration: none; En annen vanlig metode er å slå underlaget tilbake når du musen over fanen. Hvis du vil gjøre det, endrer du det til text-decoration: underline;

Men hvor er CSS 3?

Hvis du har vært oppmerksom, har du sannsynligvis lagt merke til at det ikke har vært noen CSS 3-stiler som brukes i stilarket. Dette har fordelen av å jobbe i en hvilken som helst moderne nettleser, inkludert Internet Explorer. Men det gjør ikke tappene ser ut som noe mer enn firkantede bokser. Ved å legge til en CSS 3 stiloppringingsradius (og det er tilknyttede nettleserespesifikke samtaler) kan du gjøre kantene avrundet for å se mer ut som faner på en manila-mappe.

Stilene du bør legge til i .tablist li a regelen er: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-venstre-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-venstre-radius: 0.50em;

Dette er de siste stilreglene vi skrev:

.tablist li a {display: block; polstring: 0 1em; text-decoration: none; border: 0.06em solid # 000; nedre kant: 0; font: dristig 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementer * / webkit-grense-topp-høyre-radius: 0.50em; -webkit-border-top-venstre-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-venstre-radius: 0.50em; } .tablist li a: svever {bakgrunn: # 3cf; farge: #fff; text-decoration: none; }

Med disse stilene har du en tabbed-meny som fungerer i alle de store nettleserne, og ser ut som flotte, trykte faner i CSS 3-kompatible nettlesere. Den neste siden gir deg en ekstra mulighet du kan bruke til å kle det opp enda mer.

Marker gjeldende fane

I HTML vi opprettet, hadde UL et listelement med en ID. Dette gir deg mulighet til å gi en LI en annen stil enn resten. Den vanligste situasjonen er å få den nåværende kategorien til å skille seg ut på en eller annen måte. En annen måte å tenke på dette er at du vil gråke ut fanene som ikke er live. Du endrer deretter hvor id er på de forskjellige sidene.

Vi stiler både #rgående A-taggen, så vel som #rgående A: hover-sta, slik at begge er litt forskjellige. Du kan endre farge, bakgrunnsfarge, til og med høyde, bredde og polstring av elementet. Gjør hvilke endringer som er fornuftige i ditt design.

.tablist li # current a {bakgrunnsfarge: # 777; farge: #fff; } .tablist li # current a: svever {bakgrunn: # 39C; }

Og du er ferdig! Du har nettopp opprettet en tabbed-meny for nettstedet ditt.