Accentsconagua

Navigazione a schede aggiunta dinamica di classi CSS

Web design
Share

Amo le schede, ho fatto finchè sono state in giro! Vediamo se riusciamo a sfruttare alcuni javascript e CSS3 per costruire una grande navigazione a schede. Useremo javascript per rilevare automaticamente quale scheda il visitatore è attualmente attivo e persino renderlo compatibile fin da IE6. Lunga vita a CSS3pie!

Passaggio 1: HTML

La parte facile?

Poiché desideriamo che la nostra pagina sia compatibile con IE 6-8, utilizziamo il doctype "HTML - 4.01 Transitional". Diamo un'occhiata al modello:

     testfile

I collegamenti morti sono migliori di nessun collegamento!

Il tuo web editor dovrebbe avere questo template, altrimenti copialo su index.php nella tua cartella principale.

Abbiamo tre file esterni che creeremo o aggiungeremo in seguito. Come diceva sempre il mio bisnonno: i collegamenti morti sono meglio di nessun link. pie.htc sarà collegato dal file css, quindi basterà collegare il javascript e il file css.

     testfile

Passaggio 2: HTML

Questo è il piano:

Il contenitore, l'intestazione e il contenuto sono livelli div. Il contenitore contiene tutto e la sua funzione è di impedire che il contenuto si riduca di oltre 800 px. L'intestazione è il sistema di schede e il contenuto parla da solo. Il sistema di schede è costituito da un elenco non ordinato che verrà allineato orizzontalmente. Ogni elemento dell'elenco contiene un collegamento a un'altra pagina. Con questo in mente non è difficile venire con il markup:

       testfile      
 
 
  • DSNR Home
  • Protezione
  • Brainz!
 
 
 soddisfare

Questo è ciò che abbiamo finora:


Il violino.

Ha tutte le sue funzionalità, ma i clienti non saranno mai contenti di un design così semplice. Buone notizie per te?

Passaggio 3: solo CSS CSS2

Quindi abbiamo bisogno di uno stile di base. Crea tabs.css e posizionalo nella stessa cartella di index.php

Iniziamo con lo styling del corpo e del contenitore:

 body margin: 12px -12px; background-color: # 003; font-family: Arial, "MS Trebuchet", sans-serif; font-size: 16px; width: 100%;  #container width: 800px; margin-left: auto; margin-right: auto;

Nessuno dei due elementi ha nulla di speciale, tranne il margine. Il contenitore è semplice: se margin-left e margin-right di un elemento (con una larghezza definita) sono impostati su auto, ogni browser proverà a centrare quell'elemento.

Il margine orizzontale negativo del corpo non è poi così difficile. La larghezza del contenitore è di 800 px per compatibilità con gli schermi precedenti, ma aggiungeremo degli angoli arrotondati, ciascuno con un raggio di 12 pixel. In questo modo gli angoli si restringono, quindi aggiungiamo un riempimento di 12 px al contenitore.

Passaggio 4: risultato fino ad ora

Controlla quello che hai costruito finora. Se lo schermo è troppo piccolo (sotto 800px), noterai che i bordi arrotondati a sinistra scompaiono. Non sono necessari, quindi il nostro margine negativo li rende piacevolmente invisibili alla vista.

Per mantenere le cose leggibili, dovremmo anche cambiare il colore di sfondo del contenuto e delle schede.

 #header ul background-color: # 566AAA;  #content background-color: #FFF;

Passaggio 5: JavaScript già

Prima di continuare a modellare le schede, vogliamo aggiungere una delle parti più importanti (e brillanti, anche se lo dico io) di questo: la scheda selezionata dovrebbe essere bianca. Non abbiamo intenzione di cambiare le schede su ogni pagina. Lasciamo che javascript faccia il lavoro sporco.

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

tabs.css

 body margin: 12px -12px; background-color: # 003; font-family: Arial, "MS Trebuchet", sans-serif; font-size: 16px; width: 100%;  #container width: 800px; margin-left: auto; margin-right: auto;  #header width: 600px; margine: 0 auto; / * background-color: #FFF; * / #content background-color: #FFF; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; imbottitura: 12px; comportamento: url (/PIE.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; border-radius: 12px 12px 0 0; margine: 0; larghezza: 600px; padding: 0; background-color: # 566AAA; background: -webkit-gradient (lineare, 0 0, 0 in basso, da (# 9FB6CD), a (# 003F87)); background: -moz-linear-gradient (# 9FB6CD, # 003F87); sfondo: gradiente lineare (# 9FB6CD, # 003F87); -pie-background: linear-gradient (# 9FB6CD, # 003F87); list-style-type: none; comportamento: url (/PIE.htc); overflow: visibile;  #header ul li margin: 0; padding: 0; display: blocco in linea; larghezza: 33,3%; / * personalizza questo !!! * / text-align: center; zoom: 1; * display: inline;  #header ul li a text-decoration: none; colore: # 005; font-weight: bold; larghezza: 100%; altezza: 100%; blocco di visualizzazione; imbottitura: 12px 0; text-shadow: 0 1px 1px #AAA; comportamento: url (/PIE.htc);  .selected behavior: url (/PIE.htc); box-shadow: 0 -3px 3px -1px # 222; -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; border-radius: 12px 12px 0 0; background-color: #FFF;

tabs.js

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