Accentsconagua

Tabbed Navigation Legge til CSS-klasser dynamisk

Webdesign
Share

Jeg elsker faner, jeg har gjort så lenge de har eksistert! La oss se om vi kan utnytte noe javascript og CSS3-strøm for å lage en flott flippert navigasjon. Vi skal bruke javascript for å automatisk oppdage hvilken kategori den besøkende er på, og til og med gjøre dette kompatibelt så langt tilbake som IE6. Long live CSS3pie!

Trinn 1: HTML

Den enkle delen?

Som vi vil at vår side skal være kompatibel med IE 6-8, bruker vi "HTML - 4.01 Transitional" doktypen. La oss ta en titt på malen:

     testfile

Døde lenker er bedre enn ingen linker!

Din nettredaktør bør ha denne malen, ellers kopiere denne til index.php i hovedmappen din.

Vi har tre eksterne filer som vi lager eller legger til senere. Som min bestefar sa alltid: Døde lenker er bedre enn ingen linker. pie.htc vil bli koblet fra css filen, så vi trenger bare å koble javascript og css filen.

     testfile

Trinn 2: HTML

Dette er planen:

Beholderen, toppteksten og innholdet er div-lag. Beholderen inneholder alt og funksjonen er å hindre at innholdet krympes mer enn 800px. Overskriften er tabulatorsystemet og innholdet snakker for seg selv. Flikesystemet består av en uordnet liste som vi vil justere horisontalt. Hvert listepunkt inneholder en lenke til en annen side. Med dette i tankene er det ikke vanskelig å komme opp med oppslaget:

       testfile      
 
 
  • DSNR Home
  • Beskyttelse
  • Brainz!
 
 
 innhold

Dette er hva vi har så langt:


Fiddelen.

Den har all sin funksjonalitet, men klienter kommer aldri til å være fornøyd med en så enkel design. Gode ​​nyheter for deg?

Trinn 3: Bare CSS CSS2

Så vi trenger litt grunnleggende styling. Opprett tabs.css og legg den i samme mappe som index.php

Vi starter med styling av kroppen og beholderen:

 kropp margin: 12px -12px; bakgrunnsfarge: # 003; font-familie: Arial, "MS Trebuchet", sans-serif; skriftstørrelse: 16px; bredde: 100%;  #container width: 800px; margin-left: auto; margin-høyre: auto;

Ingen av elementene har noe spesielt, bortsett fra marginen. Beholderen er enkel: Hvis margin-venstre og margin-høyre for et element (med en definert bredde) er satt til automatisk, vil hver nettleser forsøke å sentrere det elementet.

Den negative horisontale marginen på kroppen er heller ikke så vanskelig. Bredden på beholderen er 800 px for kompatibilitet med gamle skjermer, men vi skal legge runde hjørner til dem, hver med en radius på 12 px. Dette gjør at hjørnene krympes, så legger vi en polstring på 12 px til beholderen.

Trinn 4: Resultat Så langt

Sjekk hva du har bygget så langt. Hvis skjermen er for liten (under 800px), vil du legge merke til at de avrundede kantene til venstre forsvinner. De er unødvendige, så vår negative margin gjør dem pent ute av syne.

For å holde lesbar, bør vi også endre bakgrunnsfargen til innholdet og fanene.

 #header ul bakgrunnsfarge: # 566AAA;  #content bakgrunnsfarge: #FFF;

Trinn 5: JavaScript allerede

Før vi fortsetter å utforme kategoriene, vil vi legge til en av de viktigste (og strålende, selv om jeg sier det selv) deler av dette: Den valgte kategorien skal være hvit. Vi skal ikke endre fanene på hver side. Vi lar javascript gjøre det skitne arbeidet.

 hvis (document.addEventListener) document.addEventListener ("DOMContentLoaded", funksjon () ran = 1; init (), false) annet hvis (document.all &&! window.opera) document.write ('  testfile      
 
 
  • DSNR Home
  • Beskyttelse
  • Brainz!
 
 
  innhold

tabs.css

 kropp margin: 12px -12px; bakgrunnsfarge: # 003; font-familie: Arial, "MS Trebuchet", sans-serif; skriftstørrelse: 16px; bredde: 100%;  #container width: 800px; margin-left: auto; margin-høyre: auto;  #header width: 600px; margin: 0 auto; / * bakgrunnsfarge: #FFF; * / #content bakgrunnsfarge: #FFF; -moz-grense-radius: 12px; -webkit-grense-radius: 12px; border-radius: 12px; polstring: 12px; oppførsel: url (/pie.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-grense-radius: 12px; grense-radius: 12px 12px 0 0; margin: 0; bredde: 600 piksler; polstring: 0; bakgrunnsfarge: # 566AAA; bakgrunn: -webkit-gradient (lineær, 0 0, 0 bunn, fra (# 9FB6CD), til (# 003F87)); bakgrunn: -moz-lineær gradient (# 9FB6CD, # 003F87); bakgrunn: lineær gradient (# 9FB6CD, # 003F87); -pie-bakgrunn: lineær gradient (# 9FB6CD, # 003F87); liste-stil-type: none; oppførsel: url (/pie.htc); overløp: synlig;  #header ul li margin: 0; padding: 0; display: inline-block; bredde: 33,3%; / * tilpasse dette! * / text-align: center; zoom: 1; * skjerm: inline;  #header ul li a text-decoration: none; farge: # 005; font-weight: bold; bredde: 100%; høyde: 100%; skjerm: blokk; polstring: 12px 0; tekstskygge: 0 1px 1px #AAA; oppførsel: url (/pie.htc);  .selected behavior: url (/PIE.htc); boks-skygge: 0 -3px 3px -1px # 222; -moz-grense-radius: 12px 12px 0 0; -webkit-grense-radius: 12px; grense-radius: 12px 12px 0 0; bakgrunnsfarge: #FFF;

tabs.js

 hvis (document.addEventListener) document.addEventListener ("DOMContentLoaded", funksjon () ran = 1; init (), false) annet hvis (document.all &&! window.opera) document.write (''
Webdesign
×