Comment créer une navigation par onglets CSS3

Salut les gars! Aujourd'hui, nous allons nous amuser à créer une navigation par onglets CSS3. Dans cet article, nous allons créer la version darkwash jean à partir des nombreux thèmes disponibles pour ces superbes onglets, simplement parce que? N ° 1 que nous pouvons et n ° 2, le style est plus complexe et je peux vous montrer plus d'astuces avec CSS3 qu'avec les autres styles. Si vous préférez, les fichiers sources contiennent des thèmes beaucoup plus simples, alors n'hésitez pas à les suivre car leur structure est à peu près la même..

Remarque: IE7 et 8 sont pris en charge, mais leur fonctionnalité est parfaite, mais certains styles de superposition ne sont pas traités correctement. Sans le correctif merveilleux et impressionnant de CSSPIE et Dean Edwards, aucune version autre que IE9 ne serait prise en charge..

Ok, maintenant que c'est à l'écart, je pense qu'il est temps de commencer!

Le tutoriel vidéo

Nous proposons ce didacticiel dans deux formats différents: une vidéo et un didacticiel complet écrit ci-dessous. Suivez la méthode d’apprentissage que vous préférez (ou les deux!):

Le tutoriel écrit

Le tutoriel écrit pas à pas est présenté ci-dessous. Assurez-vous également de télécharger l'intégralité de la source téléchargeable.!

Étape 1 Création du balisage

La tête

Pour notre premier balisage, nous allons créer notre tête en utilisant le type de document HTML5, en insérant nos feuilles de style et en indiquant à IE 7 et 8 que l'utilisation de CSS3 est acceptable..

    Onglets CSS3

Construire les conteneurs

Une fois que vous avez ajouté la tête, entre les balises body, nous devons créer des conteneurs pour la navigation par onglets. Faisons le décomposer?

Comme vous pouvez le constater, le premier conteneur est. Ceci est utilisé pour créer une largeur complète de la navigation par onglets et pour la positionner comme vous le souhaitez.

Last est le qui est le wrapper pour les onglets eux-mêmes et aide à contenir le bloc de contenu. C'est une classe très importante et il n'est pas nécessaire de la modifier, bien que j'explique le style plus tard dans ce tutoriel..

     Les onglets iront ici

"Last is the. C'est une classe très importante et il n'est pas nécessaire de la modifier"

Créer votre premier onglet

Le dernier balisage que nous voulons écrire concerne nos onglets actuels et leur contenu..

Tout d’abord, nous voulons créer une div avec un identifiant afin de savoir quel contenu afficher en cliquant sur l’onglet correspondant. Ça ressemble à ça?

  // Le prochain balisage ira ici

Ensuite, nous allons créer l'onglet pour cet identifiant de contenu et lui indiquer d'afficher la div avec un identifiant de c1 en utilisant un hachage suivi de c1 dans le lien. Alors maintenant, votre balisage devrait ressembler à ceci?

  Premier  // Le balisage suivant ira ici

Créons maintenant un endroit pour mettre notre contenu. Pour ce faire, nous allons simplement créer une div avec une classe de contenu .tab et insérer du texte factice, donnant ainsi à votre balisage l'apparence suivante:?

  Premier          2 types d'onglets - normal et actualité
 Si vous avez un onglet d'ouverture comme celui-ci, il devrait toujours figurer en dernier dans la liste des onglets, sinon il ne s'affichera pas en premier lors du chargement de la page..
 Le texte chevauche parfois avec des onglets masqués dans IE7 & 8

Votre navigation par onglets devrait ressembler à ceci. A l'air bien dans sa forme de base, mais ajoutons un peu de style et faisons fonctionner ce bébé!

Étape 2 Creuser dans du CSS

Maintenant que nous avons pris en charge le balisage, vous vous sentez comme un gagnant maintenant! Faisons un pas de plus et renforçons cette confiance en appliquant du CSS génial au balisage que vous venez de créer? alors vous aurez vraiment quelque chose à vanter!

Tags globaux

Ok, donc pour les besoins de ce tutoriel, nous utilisons une navigation par onglets autonome, ajoutons donc quelques styles globaux tels que le corps, les balises p, le titre, etc..

Lors de la mise en œuvre des onglets, ces styles peuvent déjà figurer dans votre feuille de style. Dans ce cas, vous pouvez supprimer ces styles ou tagger le .conteneur à onglets créer un style spécifique aux onglets pour ne pas écraser les styles de vos sites Web.

 corps taille de la police: 13px; font-family: Arial, Helvetica, sans serif; couleur: # E7E7E7;  p, .tab-content li, h1, h2, h3 / * Ceci assure qu'il y a suffisamment d'espace entre vos paragraphes, titres, etc. * / margin-bottom: 10px;  a text-decoration: none; couleur: # EFD24A;  a: hover color: # AF9B41;  .tab-container h3 / * N'affecte que les en-têtes h3 à l'intérieur des onglets * / font-size: 147%; couleur: # EFDFB3;

Styliser les conteneurs

Nous allons maintenant styliser nos deux conteneurs. Pour ce tutoriel, nous allons centrer ce conteneur principal à l'aide de la marge: 0 auto, lui donner une largeur de 480 pixels et le repousser par le haut d'environ 4%..

 #container / * Utilisez ceci pour positionner le module de tabulation entier * / margin: 0 auto; largeur: 480px; marge supérieure: 4%;

Pour le conteneur .tab, il est important d’ajouter une position relative à chaque bloc de contenu d’onglet afin de se chevaucher correctement dans un espace agréable et contenu. Nous voulons que notre largeur corresponde à la largeur de notre conteneur principal à 100% et à un indice z égal à 0, ce qui aidera à empêcher IE de montrer le texte du bloc de contenu derrière le bloc actuel..

 .tab-container position: relative; largeur: 100%; z-index: 0;

À ce stade, vous devriez avoir une navigation par onglets fonctionnelle. Ça ne semble pas encore joli mais bon? ça marche! Toutes mes excuses s'il est difficile de voir.

Styliser les onglets et leur contenu

Ok, donc puisque nous avons des onglets de travail, la première chose à faire est de les aligner horizontalement. Pour cela, nous allons simplement ajouter un affichage: en ligne au premier div de chaque onglet.

 .tab-container> div display: inline;

Nous devons maintenant ajouter quelques styles par défaut aux onglets eux-mêmes. Nous allons ajouter une position de parent, ce qui est important pour IE. Nous allons également afficher un bloc inline afin de les aligner correctement avec le contenu de l'onglet. En mettant une marge de 2 pixels, nous pouvons ajouter un espace autour de chaque onglet pour le rendre plus propre. Nous allons également ajouter un arrière-plan dégradé pour chaque navigateur, un rayon de bordure et une zone d'ombre pour une impression de gaieté supplémentaire! Puisque nous utilisons à nouveau CSSPIE pour IE 7 et 8, il n’est pas nécessaire d’utiliser de mauvais filtres dans les gradients..

 .tab-container> div> a position: relative! important; / * Garde les onglets alignés l'un avec l'autre * / text-decoration: none; couleur: # D7D7D7; affichage: inline-block; rembourrage: 4px 14px; taille de police: 15px; famille de polices: "Trebuchet MS", Arial, Helvetica, sans-serif; poids de police: gras; text-transform: majuscule; marge: 2px; arrière-plan: # 4C4648; / * anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, n ° 4C4648 0%, n ° 474344 52%, n ° 2F2D2E 100%); / * firefox * / background: linear-gradient (haut, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * futurs navigateurs * / -pie-background: linear-gradient (haut, n ° 4C4648 0%, n ° 474344 52%, n ° 2F2D2E 100%); / * Tarte pour ie * / fond: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, # 4C4648), couleur-stop (52%, # 474344), couleur-stop (100% # 2F2D2E)); / * webkit * / border: 2px en pointillés # CFA840; rembourrage: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; border-radius: 3px; ombre du texte: 0 -1px 0 # 000000; -moz-box-shadow: 0 4px 10px -5px # 000000; box-shadow: 0 4 pixels 10 pixels -5 pixels # 000000; -webkit-box-shadow: 0 4px 10px -5px # 000000;

Ensuite, nous voulons que l’utilisateur sache sur quel onglet il se trouve. Donc, pour ce faire, nous allons utiliser le sélecteur de cible et utiliser Dean Edwards IE9.js pour que IE 7 & 8 le reconnaisse..

Ainsi, .tab-container> div: target> indique que lorsque le premier div (ou div, etc.) est sélectionné ou est la cible, nous allons modifier l'aspect du bouton (c'est-à-dire: a) à l'intérieur de ce div..

 .tab-conteneur> div: cible> a arrière-plan: aucune répétition faire défiler 0 0 # 948a81; ombre du texte: 0 1px 0 # 4C4648;

Maintenant que nous avons stylé les boutons d'onglets, allons de l'avant et ajoutons du caractère à la zone de contenu..

Ce que nous allons faire ici, c'est cibler la deuxième division du conteneur .tab-container qui est div et lui donner une hauteur minimale de 250 px, ce qui est important pour que toutes les divisions de contenu situées derrière la division cible ne se chevauchent pas. Donc, puisque nous avons le contenu avec la hauteur correcte, nous avons toujours besoin de cacher la div de contenu inactif derrière celle-ci, et pour ce faire, nous allons simplement ajouter un indice z égal à -2. Nous voulons aussi que IE 7 & 8 joue bien, nous allons donc ajouter une position absolue. Voilà donc l'essentiel et le reste du code est là pour ajouter un style supplémentaire et nous donner un joli look de jean foncé..

 .tab-container> div> div / * Ceci est le conteneur qui contient le contenu de l'onglet * / background: # 4C4648; / * anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, n ° 4C4648 0%, n ° 474344 84%, n ° 2F2D2E 100%); / * firefox * / background: linéaire-dégradé (haut, n ° 4C4648 0%, n ° 474344 84%, n ° 2F2D2E 100%); / * futurs navigateurs * / -pie-background: linear-gradient (en haut, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * Tarte pour ie * / fond: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, # 4C4648), couleur-stop (84%, # 474344), couleur-stop (100% # 2F2D2E)); / * webkit * / -moz-box-shadow: 0 0 12px 1px # 000000 inset; -webkit-box-shadow: 0 0 12px 1px # 000000 inset; box-shadow: 0 0 12px 1px # 000000 inset; z-index: -2; en haut: 50 px; rembourrage: 20px; bordure: solide 6px # 4C4648; contour: 2px en pointillé # CFA840; contour-offset: -8px; / * Supprimer si vous ne voulez pas de décalage * / min-height: 250px; / * Modifiez cette valeur si vous avez besoin de plus ou moins d'espace de contenu * / position: absolute; / * Corrige IE 7 & 8 * /

Une fois que les divs de contenu initiaux ont été stylisés, nous souhaitons amener le contenu cible au premier plan. Pour ce faire, nous utilisons simplement le sélecteur de cible avec un z-index de 3 et le rendons important.

 .tab-container> div: target> div position: absolute; z-index: 3! important; / * Amène le contenu au premier plan en fonction de l'onglet sur lequel l'utilisateur a cliqué * /

La dernière chose que nous ferons est d'ajouter un peu de remplissage au contenu et un style par défaut si vous souhaitez ajouter une image dans vos onglets..

Par ailleurs, n'oubliez pas d'importer votre fichier reset.css en haut de la feuille de style, nous en avons besoin pour remplacer les paramètres par défaut du navigateur..

 div.tab-content / * Styles le contenu intérieur des onglets * / padding-bottom: 70px; padding-left: 20px; padding-right: 20px;  .tab-content img margin: 0 auto; bloc de visualisation; rembourrage en bas: 20px; rembourrage en haut: 10px;  / ****** Ceci importe les autres feuilles de style afin que vous n'ayez pas à les appeler dans un fichier HTML ***** / @import url ('? /? /Reset.css');

Après tout ce qui est fini, vous devriez vous retrouver avec quelque chose comme l’image suivante. Si le vôtre ne se ressemble pas ou ne se ressemble pas, vous avez peut-être oublié quelque chose ou décidé de choisir votre propre style, revenez en arrière et revérifiez votre travail, je suis sûr qu'il ne s'agit que de quelque chose de mineur..

Encore une chose?

Nous voulons dire à IE7 & 8 qu'il est correct d'utiliser des ombres, des coins arrondis, etc. Pour y ajouter simplement les éléments contenus dans notre feuille de style avec les fonctionnalités CSS3 dans notre fichier ie.css, nous utilisons ensuite le comportement de CSSPIE. ainsi?

 .tab-conteneur> div> div, .tab-conteneur> div> a comportement: url (? /styles/csspie/PIE.htc);

Bon travail? Vous avez fini!

Si vous en êtes arrivé là, cela signifie-t-il que vous avez tout fait? toutes nos félicitations! J'espère que vous avez apprécié ce tutoriel autant que j'ai aimé l'écrire. C'est toujours un plaisir de vous apprendre de nouveaux trucs et astuces que vous ne connaissez peut-être pas déjà. Ceci étant dit, bon travail, soyez patient et continuez à assimiler le plus de connaissances possible et avant de vous en rendre compte, vous serez un maître dans tout ce que vous ferez.!

Laissez vos commentaires et questions ci-dessous;)

Création de sites web