Un menu horizontal réactif
Introduction aux pseudo-classes
Des pseudo-classes? C'est pour me faire un pseudo-cours?
Et je vous attribuerai des pseudo-points après une
pseudo-évaluation. Dites, si nous parlions un peu plus sérieusement?
La notion de pseudo-classe
La plupart des navigateurs
permettent de distinguer, dans une page web, les liens qui ont déjà été
visités de ceux qui ne l'ont pas encore étés.
Dans l'illustration ci-contre, on voit que
- le lien vers KompoZer présente une couleur violette car il a déjà été visité.
- le lien vers les deux autres logiciels sont en couleur bleue car ces liens n'ont pas encore été visités.
La couleur attribuée au contenu des balises <a> est donc susceptible d'être modifiée en fonction du comportement de l'utilisateur.
to click or not to click. Toute la question est là.
En tous les cas, il y a de la magie dans l'air. Voyons cela.
Lorsque le visiteur clique sur un lien, tout se passe comme si la balise <a> était affectée d'une nouvelle "classe" que nous pourrions appeler "visited" (visité, en anglais).
Avant: <a href="info.sio2.be/kpz">KompoZer</a>
Après: <a href="info.sio2.be/kpz" class="visited">KompoZer</a>
Vous racontez n'importe quoi. J'ai bien regardé le code dans une page où un lien avait été visité. Rien n'a été modifié. Aucune "classe" n'a été ajoutée.
Vous ne semblez pas avoir bien lu ce qui est écrit: "tout se passe comme si". Et voilà pourquoi nous parlons de "pseudo-classes".
Modifier la pseudo-classe "visited"
Il peut arriver que l'on souhaite qu'un lien visité présente une autre couleur que le violet proposé par défaut.
Si nécessaire, ouvre le document menu.html- Visualise ce document dans ton navigateur.
A priori, les trois liens se présentent soulignés et en couleur bleue: ce sont les caractéristiques par défaut des liens.
- Clique sur l'un des liens puis reviens à la même page pour constater la couleur du lien visité.
- Ouvre l'éditeur de styles CasCadeS.
Établis une nouvelle règle
de style pour le sélecteur a:visited (pas d'espace
entre a et :visited).- Définis le style de la manière suivante:
- la couleur verte,
- les caractères gras et
- la suppression du soulignement (Décoration du texte "Normal").
- Enregistre le document.
- Visualise dans le navigateur.
- Clique sur un lien puis reviens sur la page menu.html. Tu dois observer une présentation comme ci-dessous (liens 1 et 3 visités).
Ah oui, joli... Mais si j'ai d'autres liens sur ma page, ils vont tous paraître en vert, en gras et non soulignés. Je veux un effet de ce type uniquement pour le menu.
Votre remarque me consterne. Je pensais que ce point avait déjà été envisagé à la page précédente. La solution doit être évidente.
Quand tu as obentu l'effet souhaité pour la pseudo-classe
"visited", passe à la page suivante.
Dernière modification 04/11/2007
