Accentsconagua

Navigatie met tabbladen CSS-klassen dynamisch toevoegen

Web ontwerp
Share

Ik ben dol op tabbladen, ik heb het gedaan zolang ze er zijn geweest! Laten we kijken of we javascript en CSS3 power kunnen gebruiken om een ​​geweldige navigatie met tabbladen te bouwen. We gaan Javascript gebruiken om automatisch op te sporen op welk tabblad de bezoeker zich bevindt en maken dit zelfs zo ver mogelijk als IE6. Lang leve CSS3pie!

Stap 1: HTML

Het makkelijke gedeelte?

Omdat we willen dat onze pagina compatibel is met IE 6-8, gebruiken we het doctype 'HTML - 4.01 Transitional'. Laten we de sjabloon eens bekijken:

     testfile

Dode links zijn beter dan geen links!

Uw webeditor moet deze sjabloon hebben, anders kopieert u deze naar index.php in uw hoofdmap.

We hebben drie externe bestanden die we later zullen maken of toevoegen. Zoals mijn overgrootvader altijd zei: dode links zijn beter dan geen links. pie.htc wordt gelinkt vanuit het css-bestand, dus we hoeven alleen het javascript en het css-bestand te linken.

     testfile

Stap 2: HTML

Dit is het plan:

De container, header en inhoud zijn div-lagen. De container bevat alles en de functie ervan is om te voorkomen dat de inhoud meer dan 800 px krimpt. De kop is het tabsysteem en de inhoud spreekt voor zich. Het tabsysteem bestaat uit een ongeordende lijst die we horizontaal uitlijnen. Elk item in de lijst bevat een link naar een andere pagina. Met dit in gedachten is het niet moeilijk om de markup te verzinnen:

       testfile      
 
 
  • DSNR Home
  • Bescherming
  • brainz!
 
 
 inhoud

Dit is wat we tot nu toe hebben:


De viool.

Het heeft al zijn functionaliteit, maar klanten zullen nooit blij zijn met zo'n eenvoudig ontwerp. Goed nieuws voor jou?

Stap 3: CSS CSS2 alleen

We hebben dus een basisstijl nodig. Maak tabs.css en plaats het in dezelfde map als index.php

We beginnen met het stylen van het lichaam en de container:

 body margin: 12px -12px; achtergrondkleur: # 003; lettertype-familie: Arial, "MS Trebuchet", schreefloos; lettergrootte: 16px; Breedte: 100%;  #container width: 800px; marge links: auto; marge-rechts: auto;

Geen enkel element heeft iets speciaals, behalve de marge. De container is eenvoudig: als margin-left en margin-right van een element (met een gedefinieerde breedte) zijn ingesteld op auto, zal elke browser proberen dat element te centreren.

De negatieve horizontale marge van het lichaam is ook niet zo moeilijk. De breedte van de container is 800 px voor compatibiliteit met oude schermen, maar we gaan er afgeronde hoeken aan toevoegen, elk met een straal van 12 px. Hierdoor krimpen de hoeken, dus voegen we een padding van 12px toe aan de container.

Stap 4: Resultaat Tot zover

Controleer wat je tot nu toe hebt gebouwd. Als het scherm te klein is (minder dan 800 px), ziet u dat de afgeronde randen aan de linkerkant verdwijnen. Ze zijn niet nodig, dus onze negatieve marge zorgt ervoor dat ze netjes uit het zicht verdwijnen.

Om de leesbaarheid van dingen te behouden, moeten we ook de achtergrondkleur van de inhoud en de tabbladen wijzigen.

 #kopzool ul achtergrondkleur: # 566AAA;  #content background-color: #FFF;

Stap 5: JavaScript Domready

Voordat we verder gaan met het stylen van de tabbladen, willen we een van de belangrijkste (en briljante, hoewel ik het zelf vertel) delen hiervan toevoegen: het geselecteerde tabblad moet wit zijn. We gaan de tabbladen op elke pagina niet wijzigen. We laten javascript het vuile werk doen.

 if (document.addEventListener) document.addEventListener ("DOMContentLoaded", function () ran = 1; init (), false) else if (document.all &&! window.opera) document.write ('  testfile      
 
 
  • DSNR Home
  • Bescherming
  • brainz!
 
 
  inhoud

tabs.css

 body margin: 12px -12px; achtergrondkleur: # 003; lettertype-familie: Arial, "MS Trebuchet", schreefloos; lettergrootte: 16px; Breedte: 100%;  #container width: 800px; marge links: auto; marge-rechts: auto;  #header width: 600px; marge: 0 auto; / * achtergrondkleur: #FFF; * / #content background-color: #FFF; -moz-border-radius: 12px; -webkit-border-radius: 12px; grensradius: 12px; opvulling: 12px; gedrag: url (/ PIE.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; grensradius: 12px 12px 0 0; marge: 0; width: 600px; opvulling: 0; achtergrondkleur: # 566AAA; achtergrond: -webkit-gradiënt (lineair, 0 0, 0 onder, van (# 9FB6CD), tot (# 003F87)); achtergrond: -moz-linear-gradient (# 9FB6CD, # 003F87); achtergrond: lineaire gradiënt (# 9FB6CD, # 003F87); -pie-achtergrond: lineaire gradiënt (# 9FB6CD, # 003F87); list-style-type: none; gedrag: url (/ PIE.htc); overloop: zichtbaar;  #header ul li margin: 0; padding: 0; weergave: inline-block; breedte: 33,3%; / * pas dit aan !!! * / text-align: center; zoom: 1; * weergave: inline;  #header ul li a text-decoration: none; kleur: # 005; lettertype: vet; breedte: 100%; hoogte: 100%; weergave: blok; opvulling: 12px 0; text-shadow: 0 1px 1px #AAA; gedrag: url (/ PIE.htc);  .geselecteerd behaviour: url (/ PIE.htc); vakschaduw: 0 -3px 3px -1px # 222; -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; grensradius: 12px 12px 0 0; achtergrondkleur: #FFF;

tabs.js

 if (document.addEventListener) document.addEventListener ("DOMContentLoaded", function () ran = 1; init (), false) else if (document.all &&! window.opera) document.write (''
Web ontwerp
×