Slik oppretter du en CSS3 Tabbed Navigation

Hei folkens! I dag skal vi ha det gøy å lage en CSS3 Tabbed Navigation. I denne tuten skal vi skape darkwash jean-versjonen ut av de mange forskjellige temaene som er tilgjengelige for disse fantastiske kategoriene bare fordi? # 1 vi kan og # 2, det er mer styling involvert, og jeg kan vise deg mer pene triks med CSS3 enn med de andre stilene. Hvis du foretrekker det, er det mye enklere temaer i kildefilene, så følg fri for å følge med dem som strukturen er stort sett den samme.

Merk: Støtte for IE7 og 8 er der, men begrenset til at funksjonaliteten virker perfekt, men noen av overleggsstilene blir ikke behandlet riktig. Hvis ikke for den fantastiske og fantastiske CSSPIE og Dean Edwards-løsningen, ville det ikke være noen støtte for noen annen versjon enn IE9.

Ok, nå som det er ute av veien, tror jeg det er på tide vi begynte!

Videoopplæringen

Vi tilbyr denne opplæringen i to forskjellige formater: En video samt en full skriftlig opplæring nedenfor. Følg med hvilken metode du lærer du foretrekker (eller begge deler!):

Den skriftlige opplæringen

Den trinnvise skriftlige opplæringen er under. Pass på at du også tar tak i den fullstendige nedlastbare kilden!

Trinn 1 Opprette merkingen

Hodet

For vår første bit av markering, skal vi lage hodet vårt ved hjelp av HTML5 doktype, sette inn stilarkene våre og fortelle IE 7 og 8, det er greit å bruke CSS3.

    CSS3-faner

Bygning av containere

Etter at du har lagt til hodet, i mellom kroppstegnene, trenger vi å lage noen beholdere for kategorien navigasjon. La oss slå det ned?

Som du kan se er den første beholderen. Dette brukes til å opprette en full bredde av fanebladnavigasjonen og for å plassere den uansett.

Sist er det som er wrapper for selve fanene selv, så vel som det bidrar til å inneholde innholdsblokken. Dette er en veldig viktig klasse, og det er ikke nødvendig å redigere det, selv om jeg vil forklare stylingen senere i denne opplæringen.

     Faner vil gå her

"Sist er. Dette er en veldig viktig klasse, og det er ikke nødvendig å redigere det"

Opprette den første fanen

Den siste merkingen vi vil skrive, er for våre aktuelle faner og innholdet inni dem.

Først av alt ønsker vi å lage en div med et id slik at vi kan vite hvilket innhold som skal vises når du klikker på den tilhørende kategorien. Det ser slik ut?

  // Neste oppstart vil gå her

Deretter vil vi opprette tabellen for innholds-ID og fortelle det om å vise diven med et id av c1 ved å bruke en hash med c1 etter den i linken. Så nå må oppslaget ditt se slik ut?

  Først  // Neste Markup vil gå her

La oss nå lage et sted å sette inn innholdet vårt. For å gjøre dette vil vi bare lage en div med en klasse av .tab-innhold og sette inn noen dummy-tekst, slik at merkingen din nå ser ut som dette?

  Først          2 Fane typer - Regular og Newsreel
 Hvis du har en åpningsfane som denne, bør den alltid være sist i listen over faner ellers vil den ikke vises først når siden laster.
 Tekst overlapper noen ganger med skjulte faner i IE7 og 8

Navigeringsnavigasjonen din bør se slik ut. Ser bra ut i det grunnleggende skjemaet, men la oss legge til litt styling og få denne babyen til å jobbe!

Trinn 2 Graver inn i noen CSS

Nå som vi har markeringen alle tatt vare på, føler du deg som en vinner rett om nå! La oss ta det et skritt videre og bygge opp tilliten ved å bruke noen kjempebra CSS til markeringen du nettopp har opprettet? da har du virkelig noe å skryte av!

Globale Tags

Ok, så i denne veiledningen bruker vi en frittstående fanebladnavigasjon, så la oss legge til noen globale stilarter som for kroppen, p-koder, overskrift osv..

Når du implementerer fanene, kan du allerede ha disse stilene i stilarket. I så fall kan du enten slette disse stilene eller ta tak i .tab-container å opprette noen tabs-spesifikk styling, slik at du ikke overskriver nettstedets egne stiler.

 kropp font-size: 13px; font-familie: Arial, Helvetica, sans-serif; color: # E7E7E7;  p, .tab-innhold li, h1, h2, h3 / * Dette forsikrer at det er nok plass mellom avsnittene dine, overskrifter, etc * / marginbunn: 10px;  en tekst-dekorasjon: ingen; color: # EFD24A;  a: svever farge: # AF9B41;  .tab-container h3 / * Effekter bare h3-overskriftene inne i kategoriene * / fontstørrelse: 147%; color: # EFDFB3;

Styling containene

Nå skal vi stilere våre to containere. For denne opplæringen skal vi sentrere den viktigste containeren ved hjelp av margin: 0 auto, gi den en bredde på 480px og trykk den ned fra toppen om 4%.

 #container / * Bruk denne til å plassere hele tabulatoren * / margin: 0 auto; bredde: 480px; margin-top: 4%;

For .tab-containeren er det viktig å legge til en stilling for relativ for hver flikinnholdsblokk for å overlappe hverandre riktig i et fint og inneholdt rom. Vi ønsker at bredden vår passer bredden på vår hovedbeholder 100% og en z-indeks på 0 som vil bidra til å holde IE fra å vise teksten til innholdsblokken bak den nåværende.

 .tabbeholder posisjon: relativ; bredde: 100%; z-indeks: 0;

På dette punktet bør du ha en fungerende fanebladnavigasjon. Det ser ikke så pent ut, men hei? det virker! Jeg beklager hvis det er vanskelig å se.

Styling av fanene og deres innhold

Ok, så siden vi har arbeidsfaner, er den første tenkningen vi ønsker å gjøre, å linjere dem horisontalt. For å gjøre det, vil vi ganske enkelt legge til en skjerm: Inline til den første diven av hver kategori.

 .tab-container> div display: inline;

Så nå må vi legge til noen standard stiler til kategoriene selv. Vi skal legge til en stilling av slektning som er viktig for IE. Vi legger også inn en visning av inline-blokk slik at de tilpasses riktig med fanens innhold. Ved å sette en margin på 2px, kan vi legge til litt plass rundt hver fane for å gjøre det renere. Vi skal også legge til en gradientbakgrunn for hver nettleser sammen med en kantlinje og bokseskygge for litt ekstra awesomeness! Siden vi bruker CSSPIE igjen for IE 7 og 8, er det ikke behov for ekle filtre i gradienter.

 .tab-container> div> a posisjon: relative! viktig; / * Holder fanene i tråd med hverandre * / tekst-dekorasjon: ingen; farge: # D7D7D7; display: inline-block; polstring: 4px 14px; font-size: 15px; font-familie: "Trebuchet MS", Arial, Helvetica, sans-serif; font-vekt: bold; text-transform: store bokstaver; margin: 2 piksler; bakgrunn: # 4C4648; / * gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / bakgrunn: lineær gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * fremtidige nettlesere * / -pie-bakgrunn: lineær gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * Pie for ie * / Background: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 4C4648), fargestopp (52%, # 474344) # 2F2D2E)); / * webkit * / border: dashed 2px # CFA840; polstring: 4px 14px; -moz-grense-radius: 3px; -webkit-grense-radius: 0px; border-radius: 3px; tekstskygge: 0 -1px 0 # 000000; -moz-box-shadow: 0 4px 10px -5px # 000000; boks-skygge: 0 4px 10px -5px # 000000; -webkit-boks-skygge: 0 4px 10px -5px # 000000;

Neste på listen, vil vi la brukeren få vite hvilken kategori de er på. Så for å gjøre det vil vi bruke målvelgeren og bruke Dean Edwards IE9.js for å gjøre IE 7 og 8 gjenkjenne det.

Så .tab-container> div: target> sier at når den første diven (dvs. div, etc) er valgt eller er målet, vil vi endre hva knappen (dvs: a) inne i den div vil se ut som.

 .tab-container> div: target> a bakgrunn: ingen repetiser rull 0 0 # 948a81; tekstskygge: 0 1px 0 # 4C4648;

Nå som vi har stylet kategoriknappene, la oss gå videre og legge til et tegn i innholdsområdet.

Det vi skal gjøre her, er målet for den andre diven i .tab-containeren som er div og gi den en minhøyde på 250px som er viktig, slik at alle innholdsdelene bak mål div har ingen overlapping. Så siden vi har innholdet med riktig høyde, må vi likevel gjemme det inaktive innholdet div bak målet en, og for å gjøre det vil vi ganske enkelt legge til en z-indeks på -2. Også vi vil at IE 7 & 8 skal spille fint, så vi vil legge til en absolutt posisjon. Så det er viktige ting og resten av koden er der for å legge til litt ekstra styling og gi oss en fin darkwash jean look.

 .tab-container> div> div / * Dette er beholderen som inneholder fanens innhold * / bakgrunn: # 4C4648; / * gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / bakgrunn: lineær gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * fremtidige nettlesere * / -pie-bakgrunn: lineær gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * Pie for ie * / Background: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 4C4648), fargestopp (84%, # 474344) # 2F2D2E)); / * webkit * / -moz-boks-skygge: 0 0 12px 1px # 000000 innsett; -webkit-boks-skygge: 0 0 12px 1px # 000000 innsett; boks-skygge: 0 0 12px 1px # 000000 innspill; z-indeks: -2; topp: 50px; polstring: 20px; grense: solid 6px # 4C4648; omriss: 2px stiplet # CFA840; oversikt-offset: -8px; / * Slett hvis du ikke vil ha en offset * / min-høyde: 250px; / * Endre denne verdien hvis du trenger mer eller mindre innholdsplass * / posisjon: absolutt; / * Fixes IE 7 & 8 * /

Etter at de første innholdsdelene har blitt stylet, vil vi ha med målet en til forsiden. For å gjøre dette bruker vi bare målvelgeren med en z-indeks på 3 og gjør det viktig.

 .tab-container> div: target> div posisjon: absolute; z-indeks: 3! viktig; / * Bringer innholdet til forsiden avhengig av fanen som ble klikket * /

Det siste vi skal gjøre er å legge til noe polstring på innholdet og noen standard styling hvis du vil legge til et bilde i kategoriene dine.

På en side notat, ikke glem å importere din reset.css-fil øverst på stilarket, vi trenger dette for å overstyre nettleserens standardinnstillinger.

 div.tab-innhold / * Stiler det indre innholdet i kategoriene * / polstring-bunn: 70px; polstring-venstre: 20px; polstring-høyre: 20px;  .tab-innhold img margin: 0 auto; display: block; polstring-bunn: 20px; polstring: 10px;  / ****** Dette importerer andre stilark slik at du ikke trenger å ringe dem i en html-fil ***** / @import url ('? /? /Reset.css');

Etter alt som er ferdig, bør du ende opp med noe som følgende bilde. Hvis din ikke ser ut som den samme eller liknende, så enten du savnet noe eller bestemte deg for å gå med din egen styling, bare gå tilbake og kontroller arbeidet ditt, jeg er sikker på at det bare er noe mindre.

En ting til?

Vi vil fortelle IE7 og 8 at det er greit å bruke boksskygger, avrundede hjørner osv. Så til det legger vi bare til elementene som er i vårt stilark med CSS3-funksjoner til vår ie.css-fil, så bruker vi oppførselen for CSSPIE som så?

 .tab-container> div> div, .tab-container> div> a oppførsel: url (? /styles/csspie/PIE.htc);

Flott jobb? Du er ferdig!

Hvis du har kommet så langt, betyr det at alt er gjort så? Gratulerer! Forhåpentligvis likte du denne opplæringen så mye som jeg likte å skrive den. Det er alltid en glede å lære deg nye tips og triks du kanskje ikke allerede vet. Når det er sagt, godt arbeid, vær tålmodig og fortsett å suge så mye kunnskap som mulig, og før du vet det, vil du være en mester på hva du gjør!

Legg igjen dine kommentarer og spørsmål nedenfor;)

Webdesign