Les onglets CSS, HTML Dog
la navigation par onglets fabriqués à partir des éléments de liste et de CSS dollops
Les onglets ne doivent pas être horizontal, mais ils sont généralement si notre première étape va être de créer une liste horizontale.
Nous allons essayer quelques choses différentes avec CSS, mais nous allons coller avec la structure HTML de base suivante:
Maintenant, ce que nous voulons faire avec ce code HTML est tour chaque élément de liste dans un onglet, avec l'élément sélectionné apparaît comme faisant partie de la zone de contenu correspondant.
Maintenant, pour se mettre au travail ...
Inline liste-éléments
La première chose la plus évidente que nous pouvons faire est de rendre la liste horizontale. La solution la plus directe vers l'avant pour cela est de définir la propriété d'affichage des boîtes créées par les éléments li en ligne:
Maintenant, nous pouvons faire les choses un peu plus net en capitonnant les boîtes à un élément.
Réglage du remplissage de la boîte d'élément, plutôt que les boîtes élément li a l'avantage de faire toute la largeur de l'onglet cliquable.
Jusqu'à présent, les onglets ne sont pas assis sur quoi que ce soit afin que nous puissions ajouter une bordure à la section du contenu:
Mais il y a une chose essentielle manquante. Comme il est, les onglets sont juste assis dans la partie supérieure de la zone de contenu, tout en regardant à peu près la même chose. Ce que nous devons faire est de l'onglet « actif » - celui qui se rapporte à la page que nous sommes sur - regarder comme si elle fait partie de la zone de contenu, comme un onglet sur le côté d'une carte de division.
Parce que padding vertical dans des boîtes à roues alignées ne pousse pas vraiment quoi que ce soit autour d'elle, nous pouvons simplement faire ceci:
Ce Tapis de la partie inférieure de la zone d'élément de li avec l'ID « sélectionné » d'un pixel, ce qui le pousse au-dessus de la bordure supérieure de la zone de contenu. Comme la couleur de fond est blanc (en supposant que la couleur de fond de boîte de contenu est également blanc), il donne l'illusion que l'onglet, et sa frontière, font partie de la zone de contenu.
onglets simples à l'aide en ligne: affichage
Flottais liste-éléments
Donc, si nous voulons faire quelque chose d'un peu plus funky avec les onglets, nous devons horizontalize la liste des éléments d'une manière différente:
Il est le même que précédemment, sauf qu'au lieu d'afficher les boîtes élément li en ligne, nous les flottons à gauche.
Nous y sommes presque avec cette méthode, mais au lieu d'appliquer un rembourrage à l'élément de la liste sélectionnée comme nous l'avons fait avec l'approche de l'élément de liste en ligne (qui ici quelques choses pad parce qu'une boîte flotta a un type d'affichage « bloc »), nous sommes va soulever l'ensemble et smack vers le bas un pixel:
Une autre approche pour le contrôle de la lutte sur la taille des onglets est d'utiliser l'affichage: inline-block.
Faire les choses sont plus agréable ...
Il y a peu de choses que nous pouvons faire pour rendre ces onglets regarder mieux comme enlever les soulignements, offrant des couleurs différentes pour les bordures, changer les couleurs de fond en vol stationnaire etc, ce qui peut rendre les onglets plus discernable et l'onglet « actif » plus évident.
jouer autour
Bien sûr, les onglets ne doivent pas être aussi borderific que les exemples ci-dessus. Les grands principes restent les mêmes - vous définissez vos éléments de liste horizontale et les styliser alors comment vous s'il vous plaît.
Vous pouvez simplement séparer les onglets en utilisant des couleurs d'arrière-plan solide. Sinon, un truc simple, conjuré par Dan Cederholm est de manipuler la bordure inférieure d'un élément de la liste pour produire onglets minces saillantes.
Et les onglets ne doivent pas avoir boxy angles de 90 degrés, soit. L'application de rayon de frontière aux coins supérieurs gauche et en haut à droite de chaque onglet les rendre d'autant plus que ces cartes division que nous voulons ainsi imiter.