Een CSS3-navigatie met tabbladen maken

Hiya mensen! Vandaag gaan we plezier beleven aan het maken van een CSS3-navigatie met tabbladen. In deze tut gaan we de darkwash-jeanversie maken van de vele verschillende thema's die beschikbaar zijn voor deze geweldige tabbladen, alleen omdat? # 1 we kunnen en # 2, er is meer styling bij betrokken en ik kan je meer nette tricks laten zien met CSS3 dan met de andere stijlen. Als je wilt, zijn er veel eenvoudiger thema's in de bronbestanden, dus voel je vrij om mee te doen, want de structuur is vrijwel hetzelfde.

Opmerking: Ondersteuning voor IE7 & 8 is er maar beperkt in dat de functionaliteit perfect werkt, maar sommige overlay-stijlen worden niet goed behandeld. Als niet voor de geweldige en geweldige CSSPIE en Dean Edwards oplossing, zou er geen ondersteuning zijn voor een andere versie dan IE9.

Ok, nu dat niet in de weg ligt, denk ik dat het tijd is om te beginnen!

De video-zelfstudie

We bieden deze zelfstudie in twee verschillende indelingen aan: een video en een volledig geschreven zelfstudie hieronder. Volg mee met welke methode van leren je de voorkeur geeft (of beide!):

De schriftelijke zelfstudie

De stap-voor-stap geschreven tutorial is hieronder. Zorg ervoor dat je ook de volledige downloadbare bron haalt!

Stap 1 De markup maken

Het hoofd

Voor ons eerste stukje markup gaan we ons hoofd creëren met HTML5 doctype, onze stylesheets invoegen en IE 7 & 8 vertellen dat het oké is om CSS3 te gebruiken.

    CSS3-tabbladen

De containers bouwen

Nadat u de kop hebt toegevoegd, moeten tussen de body-tags enkele containers worden gemaakt voor navigatie met tabbladen. Laten we het afbreken?

Zoals je kunt zien, is de eerste container. Dit wordt gebruikt om een volledige breedte van de navigatie met tabbladen te maken en om deze naar wens te positioneren.

Laatste is de wrapper voor de eigenlijke tabbladen zelf en helpt het inhoudsblok te bevatten. Dit is een zeer belangrijke klasse en het is niet nodig om het te bewerken, hoewel ik de stijl later in deze tutorial zal uitleggen.

     Tabbladen gaan hier naartoe

"Last is the. Dit is een zeer belangrijke klasse en het is niet nodig om het te bewerken"

Uw eerste tabblad maken

De laatste opmaak die we willen schrijven is voor onze eigenlijke tabbladen en de inhoud erin.

Allereerst willen we een div maken met een id, zodat we kunnen weten welke inhoud wordt weergegeven wanneer op het bijbehorende tabblad wordt geklikt. Dat ziet er zo uit?

  // Volgende opmaak gaat hier naartoe

Vervolgens maken we het tabblad voor die content-id en laten we het de div met een id van c1 weergeven door een hash te gebruiken met c1 achter de link in de link. Dus nu moet je opmaak er zo uitzien?

  Eerste  // Volgende markup gaat hier naartoe

Laten we nu een plek maken om onze inhoud te plaatsen. Om dit te doen, maken we eenvoudig een div met een klasse van .tab-content en voegen wat dummy-tekst in, waardoor je opmaak er nu zo uitziet?

  Eerste          2 tabbladtypen - Normaal en nieuw formaat
 Als u een tabblad op deze manier heeft, moet dit altijd als laatste worden weergegeven in de lijst met tabbladen, anders wordt dit niet eerst weergegeven wanneer de pagina wordt geladen.
 Tekst overlapt soms met verborgen tabbladen in IE7 & 8

Uw navigatie met tabbladen zou er ongeveer zo uit moeten zien. Ziet er leuk uit in zijn basisvorm maar laten we wat styling toevoegen en deze baby laten werken!

Stap 2 Opgaan in een aantal CSS

Nu we de markup hebben geregeld, voel je je nu een winnaar! Laten we een stap verder gaan en dat vertrouwen opbouwen door een aantal geweldige CSS toe te passen op de markup die je zojuist hebt gemaakt? dan heb je echt iets om over op te scheppen!

Algemene tags

Okay, dus voor deze tutorial gebruiken we een zelfstandige navigatie met tabbladen, dus laten we een aantal algemene stijlen toevoegen, zoals voor het hoofdgedeelte, p-tags, kop, enzovoort.

Wanneer u de tabbladen implementeert, hebt u deze stijlen mogelijk al in uw stylesheet. In dat geval kunt u deze stijlen verwijderen of de taget gebruiken .tab-container om een bepaalde tabspecifieke stijl te creëren, zodat je de eigen stijlen van je websites niet overschrijft.

 body font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: # E7E7E7;  p, .tab-content li, h1, h2, h3 / * Dit zorgt ervoor dat er voldoende ruimte tussen uw alinea's, koppen, etc * / margin-bottom: 10px;  een text-decoration: none; color: # EFD24A;  a: hover color: # AF9B41;  .tab-container h3 / * Behandelt alleen de h3-koppen in de tabbladen * / font-size: 147%; color: # EFDFB3;

Styling van de containers

Nu gaan we onze twee containers stylen. Voor deze tutorial gaan we die hoofdcontainer met marge: 0 auto centreren, geven een breedte van 480px en duwen vanaf de bovenkant ongeveer 4%.

 #container / * Gebruik dit om de volledige tabmodule * / marge: 0 auto te plaatsen; width: 480px; margin-top: 4%;

Voor de .tab-container is het belangrijk om een relatieve positie toe te voegen voor elk tabbladinhoudblok om elkaar correct te overlappen in een mooie en ingesloten ruimte. We willen dat onze breedte overeenkomt met de breedte van onze hoofdcontainer 100% en een z-index van 0, zodat IE de tekst van het inhoudsblok achter de huidige niet kan weergeven.

 .tab-container positie: relatief; breedte: 100%; z-index: 0;

Op dit punt zou u een werkende navigatie met tabbladen moeten hebben. Het ziet er nog niet mooi uit, maar hey? het werkt! Mijn excuses als het moeilijk te zien is.

Styling van de tabbladen en hun inhoud

Oké, dus omdat we werkende tabbladen hebben, denken we eerst dat we ze horizontaal moeten opstellen. Om dat te doen, voegen we eenvoudig een display toe: inline naar de eerste div van elk tabblad.

 .tab-container> div display: inline;

Dus nu moeten we een aantal standaardstijlen toevoegen aan de tabbladen zelf. We gaan een relatieve positie toevoegen die belangrijk is voor IE. We plaatsen ook een weergave van inline-blok, zodat ze op de juiste manier worden uitgelijnd met de inhoud van het tabblad. Door een marge van 2 px in te stellen, kunnen we wat ruimte rond elk tabblad toevoegen om het schoner te maken. We gaan ook een verloopachtergrond toevoegen voor elke browser samen met een randradius en doosschaduw voor wat extra awesomeness! Omdat we CSSPIE opnieuw gebruiken voor IE 7 & 8, zijn er geen vervelende filters in de verlopen.

 .tab-container> div> a positie: relatief! belangrijk; / * Houdt de tabbladen op één lijn met elkaar * / tekst-decoratie: geen; kleur: # D7D7D7; weergave: inline-block; opvulling: 4px 14px; font-size: 15px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: in hoofdletters; margin: 2px; achtergrond: # 4C4648; / * oude browsers * / achtergrond: -moz-linear-gradient (boven, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / achtergrond: lineair verloop (boven, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * toekomstige browsers * / -pie-achtergrond: lineair verloop (boven, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * taart voor ie * / achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, kleurstop (0%, # 4C4648), kleurstop (52%, # 474344), kleurstop (100%) , # 2F2D2E)); / * webkit * / border: gestippeld 2px # CFA840; opvulling: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; grensradius: 3px; text-shadow: 0 -1px 0 # 000000; -moz-box-shadow: 0 4px 10px -5px # 000000; vakschaduw: 0 4px 10px -5px # 000000; -webkit-box-shadow: 0 4px 10px -5px # 000000;

Vervolgens willen we de gebruiker laten weten op welk tabblad hij staat. Dus om dat te doen zullen we de doelselecteur gebruiken en Dean Edwards IE9.js gebruiken om IE 7 & 8 het te laten herkennen.

Dus .tab-container> div: target> zegt dat wanneer de eerste div (di: div, etc) wordt geselecteerd of het doel is, we dan zullen veranderen wat de knop (dat wil zeggen: a) in die div eruit ziet.

 .tab-container> div: target> a background: none repeat scroll 0 0 # 948a81; tekstschaduw: 0 1px 0 # 4C4648;

Nu we de tabknoppen hebben gestileerd, laten we doorgaan en wat karakter toevoegen aan het inhoudsgebied.

Wat we hier gaan doen, is het richten van de tweede div in de .tab-container die div is en geeft deze een min-hoogte van 250px, wat belangrijk is, zodat alle content die achter het doel-div ligt, geen overlap heeft. Omdat we dus de inhoud met de juiste hoogte hebben, moeten we de inactieve inhoud achter de doel-ID verbergen, en om dat te doen voegen we eenvoudigweg een z-index van -2 toe. We willen ook dat IE 7 & 8 leuk speelt, dus we voegen een positie van absoluut toe. Dus dat zijn de belangrijke dingen en de rest van de code is er om wat extra styling toe te voegen en ons een mooie darkwash-look voor je ogen te geven.

 .tab-container> div> div / * Dit is de container die de inhoud van het tabblad * / achtergrond bevat: # 4C4648; / * oude browsers * / achtergrond: -moz-linear-gradient (boven, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / achtergrond: lineair verloop (boven, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * toekomstige browsers * / -pie-achtergrond: lineair verloop (boven, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * taart voor ie * / achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, # 4C4648), kleur-stop (84%, # 474344), kleurstop (100%) , # 2F2D2E)); / * webkit * / -moz-box-shadow: 0 0 12px 1px # 000000 inzet; -webkit-box-shadow: 0 0 12px 1px # 000000 inzet; vakschaduw: 0 0 12px 1px # 000000 inzet; z-index: -2; top: 50px; opvulling: 20px; rand: vast 6px # 4C4648; outline: 2px dashed # CFA840; outline-offset: -8px; / * Verwijderen als u geen offset * / min-hoogte wilt: 250px; / * Verander deze waarde als u meer of minder ruimte in de inhoud nodig heeft * / positie: absoluut; / * Lost IE 7 & 8 * / in

Nadat de eerste inhoudsindelingen zijn opgemaakt, willen we het doelwit naar voren halen. Om dit te doen gebruiken we eenvoudigweg de doelselecteerder met een z-index van 3 en maken het belangrijk.

 .tab-container> div: target> div position: absolute; z-index: 3! belangrijk; / * Brengt de inhoud naar voren, afhankelijk van het tabblad waarop is geklikt * /

Het laatste wat we zullen doen, is wat opvulling toevoegen aan de inhoud en een aantal standaardstijlen als je een afbeelding in je tabbladen wilt toevoegen.

Vergeet niet om uw reset.css-bestand bovenaan het stylesheet te importeren, dit hebben we nodig om de standaardinstellingen van de browser te overschrijven.

 div.tab-content / * Stijlt de innerlijke inhoud van de tabs * / padding-bottom: 70px; padding-links: 20px; opvulling rechts: 20px;  .tab-content img margin: 0 auto; display: block; padding-bottom: 20px; padding-top: 10px;  / ****** Hiermee importeert u andere stylesheets, zodat u ze niet hoeft te noemen in een html-bestand ***** / @import url ('? /? /Reset.css');

Na dat alles is voltooid, zou je eindigen met zoiets als de volgende afbeelding. Als de jouwe er niet hetzelfde uitziet of vergelijkbaar is, of je hebt iets gemist of hebt besloten om met je eigen styling te gaan, ga gewoon terug en controleer je werk opnieuw, ik weet zeker dat het maar iets kleins is.

Nog een ding?

We willen IE7 & 8 vertellen dat het ok is om vakschaduwen, afgeronde hoeken, enz. Te gebruiken. Daarom voegen we eenvoudig de elementen in ons stylesheet met CSS3-functies toe aan ons ie.css-bestand, dan gebruiken we het gedrag voor CSSPIE zoals zo?

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

Goed werk? Je bent klaar!

Als je zo ver bent gekomen, dan betekent dat dat je dat allemaal hebt gedaan? Gefeliciteerd! Hopelijk vond je deze tutorial net zo leuk als leuk om te schrijven. Het is altijd een plezier om jullie nieuwe tips en trucs bij te brengen die je misschien nog niet kent. Dat gezegd hebbende, goed werk, wees geduldig en blijf zoveel mogelijk kennis opdoen en voor je het weet ben je een meester in wat je ook doet!

Laat hieronder uw opmerkingen en vragen achter;)

Web ontwerp