Tel que vu en classe, on substitue la pseudo-classe :hover par la pseudo-classe : focus sur les appareils mobile. La raison en est bien simple; on ne peut pas faire de "hover" sur un téléphone ou une tablette.
Des petits trucs s'imposent pour s'assurer du bon fonctionnement de la pseudo-classe :focus.
1. Ce ne sont pas tous les balises qui peuvent recevoir le focus. Dans le cas de l'annexe 13, j'ai appliqué le focus sur la balise
Pour que la balise
nav{
background-image:url(images/menu.jpg);
background-position:top center;
background-repeat:no-repeat;
height:50px;
margin:auto;
}
nav ul{
font-size:small;
visibility:hidden;
}
nav:focus ul{
visibility:visible;
}
Donc quand l'usager cliquera sur la section nav contenant l'image, le nav obtiendra le focus et affichera la liste contenue dans le ul.
2. Si on veut cliquer sur un lien présent dans la liste, on y arrive pas car en cliquant sur un élément de la liste, le nav perd le focus et donc la liste disparaît de nouveau.
Une solution nous est fournie par Koen Kivits ( son blogue ) . Il s'agit d'établir une courte transition entre l'état visibility:visible et visibility:hidden de manière à ce que l'usager aie le temps de cliquer sur le lien présent.
nav{
background-image:url(images/menu.jpg);
background-position:top center;
background-repeat:no-repeat;
height:50px;
margin:auto;
}
nav ul{
font-size:small;
visibility:hidden;
transition: visibility 0.5s
}
nav:focus ul{
visibility:visible;
}
La propriété transition ne s'applique pas sur display mais le fait sur visibility. Mes ancres vers différentes sections de la page peuvent être atteintes !
Merci à Adam K et à Philippe B pour la curiosité.
Aucun commentaire:
Enregistrer un commentaire