Accentsconagua

Tabbed Navigation Lägga till CSS-klasser dynamiskt

Webbdesign
Share

Jag älskar flikar, jag har gjort så länge de har funnits! Låt oss se om vi kan använda någon javascript och CSS3-ström för att skapa en stor fliknavigering. Vi ska använda javascript för att automatiskt identifiera vilken flik besökaren är på och till och med göra detta kompatibelt så långt tillbaka som IE6. Långt levande CSS3pie!

Steg 1: HTML

Den lätta delen?

Eftersom vi vill att vår sida ska vara kompatibel med IE 6-8, använder vi "HTML-4.01 Transitional" doktypen. Låt oss ta en titt på mallen:

     testfil

Döda länkar är bättre än inga länkar!

Din webbredaktör ska ha den här mallen, annars kopiera den till index.php i din huvudmapp.

Vi har tre externa filer som vi ska skapa eller lägga till senare. Som min farfar sa alltid: Döda länkar är bättre än inga länkar. pie.htc kommer att länkas från css-filen, så vi behöver bara länka javascript och css-filen.

     testfil

Steg 2: HTML

Detta är planen:

Behållaren, rubriken och innehållet är div-lager. Behållaren innehåller allt och dess funktion är att förhindra att innehållet krympas mer än 800px. Rubriken är fliksystemet och innehållet talar för sig själv. Fliksystemet består av en oorderad lista som vi justerar horisontellt. Varje listobjekt innehåller en länk till en annan sida. Med detta i åtanke är det inte svårt att komma upp med markeringen:

       testfil      
 
 
  • DSNR Home
  • Skydd
  • Brainz!
 
 
 innehåll

Det här är vad vi har hittills:


Fiolen.

Det har all sin funktionalitet, men kunder kommer aldrig att vara nöjda med en så enkel design. Goda nyheter för dig?

Steg 3: Endast CSS CSS2

Så vi behöver lite grundläggande styling. Skapa tabs.css och placera den i samma mapp som index.php

Vi börjar med styling av kroppen och behållaren:

 kropp margin: 12px -12px; bakgrundsfärg: # 003; font-family: Arial, "MS Trebuchet", sans-serif; typsnittstorlek: 16px; bredd: 100%;  #container width: 800px; marginal-vänster: auto; marginal-höger: auto;

Varken element har något speciellt, förutom marginalen. Behållaren är enkel: om marginal-vänster och marginal-höger om ett element (med en definierad bredd) är inställda på auto, försöker varje webbläsare att centrera det elementet.

Den negativa horisontella marginalen hos kroppen är inte så svår heller. Bredden på behållaren är 800px för kompatibilitet med gamla skärmar, men vi lägger till rundade hörn till dem, var och en med en radie av 12px. Detta gör att hörnen krymper, så vi lägger till en stoppning på 12 px till behållaren.

Steg 4: Resultat hittills

Kolla vad du har byggt hittills. Om skärmen är för liten (under 800px) märker du de avrundade gränserna till vänster försvinner. De är onödiga så att vår negativa marginal döljer dem snyggt ur sikte.

För att hålla läsbarheten, bör vi också ändra bakgrundsfärgen på innehållet och flikarna.

 #header ul bakgrundsfärg: # 566AAA;  #content bakgrundsfärg: #FFF;

Steg 5: JavaScript Domready

Innan vi fortsätter att ställa in flikarna vill vi lägga till en av de viktigaste (och lysande, även om jag säger det själv) delar av det här: Den valda fliken ska vara vit. Vi kommer inte att ändra flikarna på varje sida. Vi låter javascript göra det smutsiga arbetet.

 om (document.addEventListener) document.addEventListener ("DOMContentLoaded", funktion () ran = 1; init (), false) annars om (document.all &&! window.opera) document.write  testfil      
 
 
  • DSNR Home
  • Skydd
  • Brainz!
 
 
  innehåll

tabs.css

 kropp margin: 12px -12px; bakgrundsfärg: # 003; font-family: Arial, "MS Trebuchet", sans-serif; typsnittstorlek: 16px; bredd: 100%;  #container width: 800px; marginal-vänster: auto; marginal-höger: auto;  #header width: 600px; marginal: 0 auto; / * bakgrundsfärg: #FFF; * / #content bakgrundsfärg: #FFF; -moz-gränsen-radien: 12px; -webkit-gränsen-radien: 12px; gränsstråle: 12px; vaddering: 12px; beteende: url (/PIE.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-gränsen-radien: 12px; gränsstråle: 12px 12px 0 0; marginal: 0; bredd: 600px; vaddering: 0; bakgrundsfärg: # 566AAA; bakgrund: -webkit-gradient (linjär, 0 0, 0 botten, från (# 9FB6CD), till (# 003F87)); bakgrund: -moz-linjär gradient (# 9FB6CD, # 003F87); bakgrund: linjär gradient (# 9FB6CD, # 003F87); -pie-bakgrund: linjär gradient (# 9FB6CD, # 003F87); lista-stil-typ: none; beteende: url (/PIE.htc); överflöde: synligt;  #header ul li margin: 0; padding: 0; display: inline-block; bredd: 33,3%; / * Anpassa detta !!! * / text-align: center; zoom: 1; * display: inline;  #header ul li a text-decoration: none; färg: # 005; font-weight: bold; bredd: 100%; höjd: 100%; display: block; vaddering: 12px 0; textskugga: 0 1px 1px #AAA; beteende: url (/PIE.htc);  .selected behavior: url (/PIE.htc); boxskugga: 0 -3px 3px -1px # 222; -moz-gränsen-radien: 12px 12px 0 0; -webkit-gränsen-radien: 12px; gränsstråle: 12px 12px 0 0; bakgrundsfärg: #FFF;

tabs.js

 om (document.addEventListener) document.addEventListener ("DOMContentLoaded", funktion () ran = 1; init (), false) annars om (document.all &&! window.opera) document.write'
Webbdesign
×