Navigation par onglets Ajout dynamique de classes CSS

J'adore les onglets, je les connais depuis qu'ils existent! Voyons si nous pouvons exploiter une puissance javascript et CSS3 pour créer une excellente navigation par onglets. Nous allons utiliser javascript pour détecter automatiquement l'onglet sur lequel se trouve le visiteur et même le rendre compatible dès IE6. Longue vie à CSS3pie!

Étape 1: HTML

La partie facile?

Pour que notre page soit compatible avec IE 6-8, nous utilisons le doctype "HTML - 4.01 Transitional". Regardons le modèle:

     fichier de test

Les liens morts valent mieux que pas de liens!

Votre éditeur Web devrait avoir ce modèle, sinon copiez-le dans index.php dans votre dossier principal.

Nous avons trois fichiers externes que nous créerons ou ajouterons plus tard. Comme mon arrière-grand-père l'a toujours dit: les liens morts valent mieux que pas de liens. pie.htc sera lié à partir du fichier css, il suffit donc de lier le javascript et le fichier css.

     fichier de test

Étape 2: HTML

C'est le plan:

Le conteneur, l'en-tête et le contenu sont des couches div. Le conteneur contient tout et sa fonction est d’empêcher le contenu de se réduire de plus de 800 pixels. L'en-tête est le système d'onglets et le contenu parle de lui-même. Le système d'onglets consiste en une liste non ordonnée que nous alignerons horizontalement. Chaque élément de la liste contient un lien vers une autre page. Dans cet esprit, il n’est pas difficile de trouver le balisage:

       fichier de test        DSNR Accueil
protection
Brainz!
 
  contenu

Voici ce que nous avons jusqu'à présent:

Le violon.

Il a toutes ses fonctionnalités, mais les clients ne seront jamais satisfaits d'un design aussi simple. Bonne nouvelle pour toi?

Étape 3: CSS CSS2 uniquement

Nous avons donc besoin d'un style de base. Créez tabs.css et placez-le dans le même dossier que index.php

Nous commençons avec le style du corps et du conteneur:

 corps marge: 12px -12px; couleur de fond: # 003; famille de fontes: Arial, "MS Trebuchet", sans-serif; taille de police: 16px; largeur: 100%;  #container width: 800px; marge gauche: auto; marge droite: auto;

Aucun élément n'a de spécial, sauf la marge. Le conteneur est simple: si margin-left et margin-right d'un élément (avec une largeur définie) sont réglés sur auto, chaque navigateur essaiera de centrer cet élément..

La marge horizontale négative du corps n'est pas si difficile non plus. La largeur du conteneur est de 800 pixels pour la compatibilité avec les anciens écrans, mais nous allons leur ajouter des coins arrondis, chacun avec un rayon de 12 pixels. Cela rend les coins rétrécis, nous ajoutons donc un rembourrage de 12px au conteneur.

Étape 4: Résultat jusqu'ici

Vérifiez ce que vous avez construit jusqu'à présent. Si l'écran est trop petit (moins de 800 pixels), vous remarquerez que les bordures arrondies à gauche disparaissent. Ils sont inutiles et notre marge négative les dissimule bien.

Pour garder les choses lisibles, nous devrions également changer la couleur de fond du contenu et les onglets.

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

Étape 5: JavaScript Domready

Avant de poursuivre le style des onglets, nous souhaitons ajouter l’une des parties les plus importantes (et brillantes, même si je le dis moi-même): l’onglet sélectionné doit être blanc. Nous n'allons pas changer les onglets sur chaque page. Nous laissons javascript faire le sale boulot.

 if (document.addEventListener) document.addEventListener ("DOMContentLoaded", function () ran = 1; init (), false) sinon if (document.all &&! window.opera) document.write ('  fichier de test        DSNR Accueil
protection
Brainz!
 
   contenu

tabs.css

 corps marge: 12px -12px; couleur de fond: # 003; famille de fontes: Arial, "MS Trebuchet", sans-serif; taille de police: 16px; largeur: 100%;  #container width: 800px; marge gauche: auto; marge droite: auto;  #header width: 600px; marge: 0 auto; / * background-color: #FFF; * / #content background-color: #FFF; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; rembourrage: 12px; comportement: url (/PIE.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; border-radius: 12px 12px 0 0; marge: 0; largeur: 600px; rembourrage: 0; couleur de fond: # 566AAA; arrière-plan: -webkit-gradient (linéaire, 0 0, 0 en bas, de (# 9FB6CD) à (# 003F87)); arrière-plan: -moz-linear-gradient (# 9FB6CD, # 003F87); arrière-plan: gradient linéaire (# 9FB6CD, # 003F87); -pie-background: linear-gradient (n ° 9FB6CD, n ° 003F87); type de style de liste: aucun; comportement: url (/PIE.htc); débordement: visible;  #header ul li margin: 0; rembourrage: 0; affichage: inline-block; largeur: 33,3%; / * personnaliser ceci !!! * / text-align: center; zoom: 1; * display: inline;  #header ul li a text-decoration: none; couleur: # 005; poids de police: gras; largeur: 100%; hauteur: 100%; bloc de visualisation; rembourrage: 12px 0; text-shadow: 0 1px 1px #AAA; comportement: 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; couleur de fond: #FFF;

tabs.js

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

Création de sites web