J'aime relever le défi de créer quelque chose avec CSS qui utilise un élément pour en déclencher un autre. Il peut être assez difficile de réfléchir à tous les éléments en jeu et de trouver un moyen de gérer votre code HTML de manière facilement contrôlable dans votre code CSS.
Aujourd'hui, nous allons nous lancer dans un tel défi. Nous allons créer une page d'accueil de base qui permute les images d'arrière-plan en fonction du lien que vous survolez dans la navigation. En cours de route, vous apprendrez tout sur l’idée des survols à distance et sur la manière de les utiliser dans vos projets.
Tour de passe-passe
Saviez-vous qu'il est possible, en utilisant uniquement CSS, de manipuler un élément lorsqu'un utilisateur survole un élément complètement différent? C'est un peu délicat, mais une fois que vous en avez l'habitude, vous pouvez obtenir des effets vraiment géniaux.
Pour voir comment cela fonctionne, prenons un exemple très basique. Imaginez que vous avez le code suivant:
Alors qu'auparavant nous ne ciblions que les frères et soeurs adjacents, nous ciblons maintenant tous les frères et soeurs plus âgés. Alors maintenant, toutes les images qui se trouvent au même niveau de l'arborescence DOM que notre ancre recevront une bordure suite au survol.
Changer votre façon de penser
? N'abandonnez pas! L'expérimentation est l'endroit où l'éducation a lieu.Notez que, pour que cette technique fonctionne, les éléments qui nous intéressent doivent être étroitement liés du point de vue de l'arborescence DOM. Plus précisément, l'élément que vous allez manipuler doit être un frère ou un enfant de l'élément que vous souhaitez survoler. Vous ne pouvez pas avoir de survol distant qui nécessite de remonter dans l'arbre DOM.
Au fur et à mesure que vous commencez à construire des projets utilisant cette technique, vous constaterez que ces règles simples peuvent causer de véritables maux de tête! Ils modifient et cassent le format que vous utilisez généralement pour structurer votre code HTML et vous incitent à penser de manière créative pour trouver le moyen de restructurer vos éléments de façon à ce que les survols distants fonctionnent.
Pour l'exemple d'aujourd'hui, il m'a fallu plusieurs essais pour structurer correctement mon code HTML et CSS afin que tout fonctionne correctement. De votre point de vue, cela paraîtra très simple, car je vais le présenter dans le bon ordre. Rappelez-vous cependant que lorsque vous faites cela dans vos propres projets, il vous faudra beaucoup de bidouillage et de peaufinage. N'abandonne pas! L'expérimentation est l'endroit où l'éducation a lieu.
Ce que nous construisons
L'élément que nous construisons aujourd'hui est une simple page d'accueil. La navigation est un menu vertical en bas à gauche et le reste de la zone de contenu est occupé par une grande image.
Démo: Cliquez ici pour lancer.
Maintenant, si c'est tout ce que nous faisions, le HTML serait assez simple. Un grand div avec une image d'arrière-plan contenant un div plus étroit avec un fond blanc et une liste non ordonnée à l'intérieur. Nous voulons cependant rendre les choses un peu plus compliquées. Lorsque l'utilisateur survole un lien de navigation, l'image d'arrière-plan doit être modifiée.
Cela signifie que nous avons besoin de toute une pile d'images d'arrière-plan. Le défi consiste toutefois à déterminer où placer ces images dans le balisage afin que nous puissions y accéder via un survol à distance. Voyons voir comment ça fonctionne.
Étape 1: HTML
Pour notre code HTML, nous allons avoir besoin d’un conteneur contenant une liste non ordonnée à l’intérieur d’un élément nav, encapsulé dans un conteneur div. Voici la structure de base:
Nous allons évidemment vouloir du texte dans notre navigation, afin que nous puissions l'inclure également. Notez également que j'ai jeté dans un en-tête pour servir d'identifiant de site.
Pour finir, ajoutons à nos images. Nous voudrons que chaque lien corresponde à une image. Pour ce faire, la meilleure solution consiste à placer une image après chaque lien. Ainsi, nous pourrons contrôler ces images lorsqu'un lien survolera en utilisant un sélecteur de frères et soeurs, comme précédemment. Voici à quoi cela ressemble en action:
Cela garantira que nous avons cette barre blanche du côté gauche que nous voulons. Passons maintenant au style du texte et de la liste. Nous devons cibler h1 et ul, puis appliquer un style de base:
Maintenant que l'élément ul a été stylé, nous devons creuser et styler spécifiquement les éléments de texte, qui sont en réalité tous des éléments d'ancrage à l'intérieur des éléments de liste. Ciblez-les, configurez-les pour bloquer afin que vous puissiez définir spécifiquement leurs dimensions, puis définissez-les comme suit:
Compte tenu de la structure de notre document, nous ne pouvons pas trop nous déplacer dans cet élément de navigation ou cette liste non ordonnée. Par conséquent, nous devons cibler spécifiquement le premier élément de la liste afin de pouvoir déplacer le texte en place. Ceci est accompli avec nth-child (IE9 et supérieur uniquement, utilisez selectivizr pour les anciens navigateurs).
Étape 5: Styles de survol
Comme vous pouvez le voir sur l'image ci-dessus, le menu de navigation est maintenant parfait.Malheureusement, il ne fait toujours rien! Ne vous inquiétez pas, nous avons tout configuré comme nous en avons besoin. Il suffit donc de quelques lignes de code CSS pour donner vie à tout cela.
Premièrement, j'ai ajouté un effet de survol au texte afin que vous ayez une idée du fait que quelque chose s'y passe. Ceci est important pour illustrer le concept selon lequel ce que l'utilisateur fait à gauche affecte les photos à droite.
Enfin, pour terminer, il suffit d’attendre le survol de l’utilisateur, puis de saisir une des images à l’extérieur du conteneur et de la placer par-dessus l’image d’arrière-plan par défaut. Notez que nous faisons cela avec le combinateur de frères et sœurs adjacent que nous avons appris auparavant. Cela garantit que nous prenons l'image spécifique associée à l'ancre survolée.
Voyez-le en action
Avec ça, nous avons tous fini! Il est maintenant temps de jeter un coup d'œil sur les fruits de notre travail. Veillez à survoler chacun des liens dans la barre latérale et observez en quoi cela affecte l'image d'arrière-plan.
Démo: Cliquez ici pour lancer.
Va construire quelque chose
A présent, vous devriez avoir une bonne idée de la manière d'utiliser les survols distants pour organiser des événements CSS fantaisistes. Pensez à quelque chose de sympa à faire avec cette idée et allez la construire. Cela semble simple, mais je peux presque garantir que vous rencontrerez des problèmes époustouflants en cours de route. Reportez-vous simplement ici pour voir comment cela fonctionne et assurez-vous de le garder jusqu'à ce que vous le maîtrisiez!