Accentsconagua
Share
Bienvenue dans la prochaine série de didacticiels dans laquelle nous utilisons le combinateur général pour frères et soeurs. ~ pour créer divers composants pour le Web. Ce tutoriel couvrira les éléments de navigation à l'aide de liens et d'entrées radio.
En plus des sélecteurs CSS, le changera propriété, et les états d'entrée du tutoriel précédent, nous allons également couvrir un hack de frontière, Sass pour les boucles, calc (), et accessibilité!
Voici la démo que nous allons construire:
Avertissement: ces effets CSS peuvent ou non fonctionner dans les navigateurs plus anciens. Je les ai testés dans les dernières versions de Chrome, Firefox et Safari..
J'utiliserai Sass, un préprocesseur CSS pour accélérer le processus de codage!
J'utiliserai également l'incroyable AutoPrefixer au lieu des préfixes de fournisseur. Si vous utilisez CodePen, assurez-vous de bien accéder aux paramètres de votre stylet, cliquez sur CSS et sélectionnez AutoPrefixer..
La première version que nous allons créer est la barre d’onglet comprenant liens. Ceci est le plus simple et facile à faire; idéal pour une navigation générale à utiliser sur plusieurs pages Web différentes.
Nous allons commencer avec une base élément avec cinq liens et une bordure. Vous pouvez également utiliser un autre élément conteneur, mais je préfère un élément de navigation, car c’est l’objet de cet extrait de code. La bordure sert à montrer quel lien est survolé ou sélectionné.
J'emballe également ma navigation dans un autre conteneur, mais vous n'en avez pas besoin pour le balisage de base!
L'étape suivante consiste à créer une base visuelle pour les onglets. Le conteneur doit être relativement positionné; nous utiliserons flexbox pour positionner les liens sur une ligne, mais vous pouvez également utiliser des flottants. Les liens doivent occuper le même espace, occupant toute la largeur du conteneur.
Cette partie peut être délicate, vous devez donc l'ajuster en fonction de votre cas d'utilisation. Je savais qu'il me fallait exactement cinq liens pour cette démo. J'ai donc pu utiliser 5 comme variable Sass. $ n afin de calculer la largeur exacte calc (100% / 5). Je l'ai fait parce que je voulais pouvoir changer facilement et rapidement le numéro du lien en haut de ma feuille de style, mais vous pouvez également utiliser un pourcentage simple. 20% si vous préférez ne pas utiliser calc (), ou une largeur fixe 160px si vous ne savez pas combien de liens vous aurez.
La bordure doit avoir la même largeur que chaque lien - nous utiliserons la même largeur que nous avons utilisée pour les liens. Enfin, nous le positionnerons absolument dans le coin inférieur gauche du conteneur..
La partie suivante utilise le sélecteur général! Nous allons coiffer :flotter, :actif, et :concentrer, ainsi qu'un .actif classe si vous souhaitez utiliser JavaScript pour que la bordure «colle» une fois que vous avez cliqué sur un lien..
Chaque fois que vous survolez un lien, la frontière doit se déplacer à la position du lien. Si chaque lien est 160px, puis survolant le deuxième lien provoque le déplacement de la frontière 160px à droite; survoler le troisième lien devrait entraîner le déplacement de la frontière 320px à droite.
En utilisant ces informations, nous pouvons créer une boucle Sass for qui calcule les nombres automatiquement. Ceci est une directive qui sort un ensemble de styles un certain nombre de fois - dans ce cas, elle afficherait ce style de transformation $ n fois, ou 5, comme nous l'avons précisé précédemment.
a @for $ i de 1 à $ n &: nth-enfant (# $ i) & .active ~ hr transformation: translateX (# ($ i - 1) * 100%); &: hover, &: focus, &: active ~ hr, ~ .active ~ hr transformer: translateX (# ($ i - 1) * 100%);
$ i est le numéro de la boucle: 1, 2, 3, 4 ou 5. Pour utiliser ce nombre à l'intérieur de la boucle, nous devrons l'échapper en l'enveloppant d'un signe dièse et de crochets. # .
Si nous utilisions des largeurs fixes, nous remplacerions 100%, qui déplace la bordure de toute sa largeur, avec 160px ou aussi large que les liens doivent être. Si vous finissez par utiliser .actif, vous devrez utiliser spécifier ~ .active ~ h comme dans l'exemple ci-dessus car sinon la bordure restera à la position active.
Vous pouvez également le faire sans boucle for, mais ce n'est pas aussi facile à mettre à jour ou à ajuster. Le deuxième lien (a: nième enfant (2)) se déplace translateX (100%), le quatrième lien se déplace translateX (300%), etc. Vous devrez spécifier une transformation pour chaque lien dans votre navigation..
Si vous survolez le code Sass dans l'exemple ci-dessus, un message Voir compilé bouton devrait apparaître dans le coin inférieur droit sur lequel vous pouvez cliquer pour voir le CSS compilé. C'est utile pour voir comment fonctionne la boucle for et comment obtenir la même chose sans cette directive Sass.
Enfin, nous ajouterons quelques transitions pour créer le mouvement «glissant» de la frontière d’un lien à l’autre. Nous ajouterons une transition plus lente à la bordure elle-même lorsque celle-ci reviendra à la position par défaut et une transition plus rapide à la bordure en survol de manière à ce qu'elle s'accroche au lien correct. La dernière étape consiste à ajouter des changements de couleur à la bordure lors du survol et du clic.!
Cette prochaine version de la navigation par onglet personnalisée semble identique à la première, mais utilise des entrées radio au lieu de liens. Cela fonctionne bien lorsque vous parcourez les sections de contenu sur la même page.!
La principale différence dans le code HTML réside dans le fait que nous avons maintenant besoin de deux éléments par onglet: une étiquette pour représenter visuellement l’onglet et une entrée radio pour ajouter des fonctionnalités..
Chaque entrée radio a le même nom, de sorte que la sélection d’une des deux désélectionnera les autres. Les étiquettes correspondent à l'ID de chaque entrée. Vous pouvez également organiser vos entrées radio et vos étiquettes de manière à ce que les étiquettes et les entrées correspondantes soient côte à côte si cette structure est préférable.!
Le style de la navigation par onglet radio est presque identique à celui de la navigation par lien. La seule différence est que chaque entrée radio doit absolument être positionnée directement sur l'étiquette correspondante. J'ai utilisé un Sass for loop pour éviter les répétitions, et aussi utilisé calc () pour éviter les pourcentages décimaux tels que 16,6667%.
Pour les transformés, au lieu d'avoir un .actif classe, nous allons utiliser :vérifié. Cet état est utile car maintenant la bordure «collera» lorsque vous sélectionnerez l’une des radios.!
Les flèches sont fonctionnellement les mêmes que les onglets radio. ils ne diffèrent que visuellement. Cette version convient aux contenus de style fil d'Ariane ou étape par étape. Vous pouvez également utiliser des liens si vous préférez!
La configuration HTML est la même que celle des onglets d’entrée radio ci-dessus. Si vous souhaitez utiliser des liens, ce sera la même chose que les onglets de liens..
La plus grande différence dans le style vient de la frontière qui se déplace en vol stationnaire. Au lieu d'une fine ligne en bas, la bordure occupe toute la hauteur de la navigation. Il se positionne également derrière les entrées et les étiquettes.
Pour créer les extrémités pointues, nous allons utiliser un hack de bordure hr: avant et heure: après. Chaque pseudo-élément aura une hauteur et une largeur de 0, mais une largeur de bordure qui le rend aussi haut que le conteneur parent. Cela crée des triangles que nous pouvons ajuster individuellement pour créer nos extrémités pointues.
Pour la série de triangles de gauche, le bord gauche doit être blanc tandis que les autres sont colorés; pour les triangles de droite, le bord gauche doit être coloré tandis que les autres sont blancs. Nous allons également définir les bords gauche et droit des deux jeux pour qu'ils soient plus fins que ceux du haut et du bas afin que les bords aient l'air plus courts. Ensuite, nous placerons chaque ensemble sur les côtés gauche et droit de heure.
La fonctionnalité et l'animation sont exactement les mêmes que les entrées radio, ou les liens si vous les avez utilisés à la place..
Bien que ces éléments de navigation fonctionnent bien d’un point de vue visuel, une personne utilisant un lecteur d’écran ou ayant besoin d’autres formes d’accessibilité peut avoir des difficultés à lire ou à accéder à chaque option..
Pour remédier à certains de ces problèmes, nous pouvons utiliser une combinaison de rôles, d'étiquettes, d'éléments cachés et d'attributs tabindex afin que la navigation soit correctement lue du point de vue de l'accessibilité. J'en apprends encore beaucoup sur l'accessibilité, mais cette combinaison semble fonctionner mieux avec ce style de navigation..
Je me suis principalement concentré sur le masquage d'éléments qui ne sont pas nécessaires pour les lecteurs d'écran tout en étiquetant les éléments importants pour la fonctionnalité de la navigation, tels que les entrées radio qui n'incluent pas de texte par défaut, contrairement aux liens. Essayez ce qui fonctionne le mieux pour votre cas d'utilisation!
Il existe des dizaines de façons différentes d'utiliser le sélecteur de frères et soeurs: visuel, fonctionnel ou les deux. Il fournit un moyen puissant de personnaliser les composants sans avoir à utiliser plus que CSS et HTML. Nous avons couvert les éléments de formulaire et de navigation jusqu'à présent; dans le prochain, nous allons apprendre à créer un menu déroulant personnalisé. N'hésitez pas à laisser un commentaire ci-dessous si vous avez des questions ou des commentaires!
