Så här skapar du en CSS3 Tabbed Navigation

Hiya folk! Idag ska vi ha kul att skapa en CSS3 Tabbed Navigation. I denna tut kommer vi att skapa darkwash jean versionen av de många olika teman som är tillgängliga för dessa fantastiska flikar bara för att? # 1 vi kan och # 2, det är mer styling involverad och jag kan visa dig mer snygga knep med CSS3 än med de andra stilarna. Om du föredrar finns det mycket enklare teman i källfilerna, så gärna följa med dem eftersom strukturen är ungefär densamma.

Obs! Stöd för IE7 & 8 är där men begränsat eftersom funktionaliteten fungerar perfekt men några av överlagringsstilarna behandlas inte ordentligt. Om inte för den underbara och fantastiska CSSPIE och Dean Edwards fixa, skulle det inte vara något stöd för någon annan version än IE9.

Okej, nu när det är ur vägen, tror jag att det är dags att vi började!

Video Tutorial

Vi erbjuder denna handledning i två olika format: En video samt en fullständig skriftlig handledning nedan. Följ med vilken inlärning du föredrar (eller båda!):

Den skriftliga handledningen

Den stegvisa skriftliga handledningen finns nedan. Var noga med att ta tag i hela nedladdningsbara källan också!

Steg 1 Skapa Markup

Huvudet

För vår första bit av uppmärkning kommer vi att skapa vårt huvud med hjälp av HTML5-doktyp, infoga våra stylesheets och berätta IE 7 & 8, det är ok att använda CSS3.

    CSS3-flikar

Bygga behållarna

När du har lagt till huvudet, mellan kroppsgenerna behöver vi skapa några behållare för fliknavigering. Låt oss bryta ner det?

Som du kan se är den första behållaren. Detta används för att skapa en full bredd av fliknavigering och för att placera den men du vill.

Sist är det som är wrapper för själva flikarna själva, liksom det hjälper till att innehålla innehållsblocket. Det här är en mycket viktig klass och det är inte nödvändigt att redigera det, även om jag kommer att förklara stylingen senare i denna handledning.

     Flikar kommer att gå här

"Det sista är. Det här är en mycket viktig klass och det är inte nödvändigt att redigera det"

Skapa din första flik

Den sista markeringen vi vill skriva är för våra faktiska flikar och innehållet inuti dem.

Först och främst vill vi skapa en div med ett ID så att vi kan veta vilket innehåll som ska visas när du klickar på motsvarande flik. Det ser ut så här?

  // Nästa markup kommer att gå här

Då skapar vi fliken för det innehålls-idet och berättar det för att visa diven med ett id av c1 genom att använda en hash med c1 efter den i länken. Så nu ska din uppställning se ut så här?

  Först  // Nästa Markup kommer att gå hit

Låt oss nu skapa en plats för att lägga in vårt innehåll. För att göra detta skapar vi helt enkelt en div med en klass av .tab-innehåll och lägger in lite dummy text, så att din markering nu ser ut så här?

  Först          2 Fliktyper - Regelbunden och Nyhetsreferens
 Om du har en öppningsflik så här borde den alltid vara sist i listan med flikar, annars kommer det inte att visas först när sidan laddas.
 Text överlappar ibland med dolda flikar i IE7 & 8

Din fliknavigering ska se ut så här. Ser bra ut i det grundläggande formuläret men låt oss lägga till lite styling och få den här barnen att arbeta!

Steg 2 Grävning i vissa CSS

Nu när vi har markeringen som alla tagit hand om känner ni som en vinnare just nu! Låt oss ta det ett steg längre och bygga upp det förtroendet genom att tillämpa några fantastiska CSS på den markering du just skapat? då har du verkligen något att skryta om!

Globala Taggar

Okej, för det här syftet med den här handledningen använder vi en fristående fliknavigering, så låt oss lägga till några globala stilar som för kroppen, p-taggarna, rubriken etc..

När du implementerar flikarna kanske du redan har dessa stilar i ditt stilark. I så fall kan du antingen ta bort dessa stilar eller ta tag i .tab-behållare att skapa vissa flikspecifika styling så att inte överskriva dina egna egna stilar.

 kropp font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: # E7E7E7;  p, .tab-innehåll li, h1, h2, h3 / * Detta försäkrar att det finns tillräckligt med utrymme mellan dina stycken, rubriker, etc * / margin-bottom: 10px;  en text-decoration: none; color: # EFD24A;  a: svävar färg: # AF9B41;  .tab-container h3 / * Effekter bara h3-rubrikerna inuti flikarna * / fontstorlek: 147%; color: # EFDFB3;

Styling behållarna

Nu ska vi stilla våra två behållare. För denna handledning kommer vi att centrera den huvudsakliga behållaren med marginal: 0 auto, ge den en bredd på 480px och tryck ner den från toppen ca 4%.

 #container / * Använd detta för att placera hela flikmodulen * / marginal: 0 auto; bredd: 480 x; margin-top: 4%;

För .tab-behållaren är det viktigt att lägga till en relativ position för varje flikinnehållsblock för att överlappa varandra korrekt i ett fint och inrymt utrymme. Vi vill att vår bredd matchar bredden på vår huvudbehållare 100% och ett z-index på 0 som hjälper till att hålla IE från att visa texten i innehållsblocket bakom den nuvarande.

 .flikbehållare position: relativ; bredd: 100%; z-index: 0;

Vid denna tidpunkt bör du ha en fungerande fliknavigering. Det ser inte bra ut än hej? det fungerar! Jag ber om ursäkt om det är svårt att se.

Styling av flikarna och deras innehåll

Okej, så eftersom vi arbetar flikar, är den första tänkningen vi vill göra, att linjer dem upp horisontellt. För att göra det ska vi helt enkelt lägga till en bildskärm: inline till den första diven i varje flik.

 .flikbehållare> div display: inline;

Så nu måste vi lägga till några standardstilar till flikarna själva. Vi ska lägga till en post av relativ som är viktig för IE. Vi lägger också in en inline-block så att de ordentligt anpassas med flikinnehållet. Genom att sätta en marginal på 2px kan vi lägga till lite plats runt varje flik för att göra det renare. Vi ska också lägga till en gradientbakgrund för varje webbläsare tillsammans med en radie och boxskugga för lite extra awesomeness! Eftersom vi använder CSSPIE igen för IE 7 & 8, finns det inget behov av otäcka filter i gradienterna.

 .flikbehållare> div> a position: relative! important; / * Håller flikarna i linje med varandra * / text-dekoration: ingen; färg: # D7D7D7; display: inline-block; vaddering: 4px 14px; font-size: 15px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-trans: versaler; marginal: 2px; bakgrund: # 4C4648; / * gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / bakgrund: linjär gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * framtida webbläsare * / -pie-bakgrund: linjär gradient (topp, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * paj för dvs * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 4C4648), färgstopp (52%, # 474344) , # 2F2D2E)); / * webkit * / border: dashed 2px # CFA840; vaddering: 4px 14px; -moz-gränsen-radien: 3px; -webkit-gränsen-radien: 0px; gränsstråle: 3px; textskugga: 0 -1px 0 # 000000; -moz-box-skugga: 0 4px 10px -5px # 000000; boxskugga: 0 4px 10px -5px # 000000; -webkit-box-skugga: 0 4px 10px -5px # 000000;

Nästa på listan vill vi låta användaren veta vilken flik de är på. Så för att göra det kommer vi att använda målväljaren och använda Dean Edwards IE9.js för att göra IE 7 & 8 känna igen det.

Så .tab-container> div: target> säger att när den första diven (dvs div, etc) är vald eller är målet så kommer vi att ändra vad knappen (dvs: a) inuti den div kommer att se ut.

 .flikbehållare> div: target> a background: none repeat scroll 0 0 # 948a81; textskugga: 0 1px 0 # 4C4648;

Nu när vi har utformat flikknapparna, låt oss gå vidare och lägga till lite tecken i innehållsområdet.

Vad vi ska göra här är målet andra div inom .tab-container som är div och ge den en minhöjd på 250px vilket är viktigt så att alla innehållsdelarna bakom mål-diven inte har någon överlappning. Så eftersom vi har innehållet med rätt höjd, behöver vi fortfarande dölja det inaktiva innehållet div bakom målet ett, och för att göra så lägger vi helt enkelt ett z-index på -2. Vi vill också att IE 7 & 8 ska spela bra så vi lägger till en absolut position. Så det är de viktiga grejerna och resten av koden finns för att lägga till lite extra styling och ge oss en fin darkwash jean look.

 .flikbehållare> div> div / * Detta är behållaren som innehåller flikinnehållet * / bakgrund: # 4C4648; / * gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / bakgrund: linjär gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * framtida webbläsare * / -pie-bakgrund: linjär gradient (topp, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * paj för dvs * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 4C4648), färgstopp (84%, # 474344) , # 2F2D2E)); / * webkit * / -moz-box-skugga: 0 0 12px 1px # 000000 inset; -webkit-box-skugga: 0 0 12px 1px # 000000 inlägg; boxskugga: 0 0 12px 1px # 000000 inset; z-index: -2; topp: 50px; vaddering: 20px; gräns: fast 6px # 4C4648; skiss: 2px stippad # CFA840; konturförskjutning: -8px; / * Radera om du inte vill ha en kompensation * / min-höjd: 250px; / * Ändra det här värdet om du behöver mer eller mindre innehållsrymd * / position: absolut; / * Fixerar IE 7 & 8 * /

När de första innehållsdelarna har stylats, vill vi ta målet framåt. För att göra detta använder vi helt enkelt målsväljaren med ett z-index på 3 och gör det viktigt.

 .flikbehållare> div: mål> div position: absolute; z-index: 3! viktigt; / * Tar innehållet framåt beroende på fliken som klickades * /

Det sista vi gör är att lägga till en del vadderingar till innehållet och vissa standardinställningar om du vill lägga till en bild i dina flikar.

På en sidotal glöm inte att importera din reset.css-fil längst upp i stilarket, vi behöver detta för att åsidosätta webbläsarens standardinställningar.

 div.tab-innehåll / * Stilar det inre innehållet i flikarna * / polstring-botten: 70px; stoppning-vänster: 20px; polstring-höger: 20px;  .tab-innehåll img marginal: 0 auto; display: block; vadderande-botten: 20px; padding-top: 10px;  / ****** Det importerar andra stylesheets så att du inte behöver ringa dem i en html-fil ***** / @import url ('? /? /Reset.css');

När allt är klart, borde du sluta med något som följande bild. Om din tittar inte på samma eller liknande saknar du antingen något eller bestämt dig för att gå med din egen styling, gå bara tillbaka och kontrollera ditt arbete, jag är säker på att det bara är något mindre.

En sak till?

Vi vill berätta för IE7 & 8 att det är bra att använda rutaskuggor, avrundade hörn osv. Så att vi bara lägger till elementen som finns i vårt stylesheet med CSS3-funktioner till vår ie.css-fil, då använder vi beteendet för CSSPIE såhär?

 .flikbehållare> div> div, .tab-container> div> a behavior: url (? /styles/csspie/PIE.htc);

Bra jobbat? Du är klar!

Om du har kommit så långt, betyder det att allt är gjort så? grattis! Förhoppningsvis tyckte du om denna handledning så mycket som jag tyckte om att skriva den. Det är alltid ett nöje att lära dig nya tips och knep du kanske inte redan vet. Med det sagt, bra jobb, var tålmodig och fortsätt att njuta av så mycket kunskap som möjligt och innan du vet det kommer du att vara en mästare på vad du än gör!

Lämna dina kommentarer och frågor nedan;)

Webbdesign