Chaque année, un ou plusieurs étudiants me demandent le code pour une navigation avec survols et apparitions d’images de ce type :
See the Pen Nav + survol by Benoît Wimart (@benoitwimart) on CodePen.0
J’ai mis en ligne sur codepen un prototype rapide (sans « class »), car je ne suis pas complètement opposé à ce type de menu, néanmoins plusieurs points négatifs peuvent être observés avec cet exemple :
- la mise en page selon le nombre d’éléments ne sera pas toujours simple ;
- la dégradation sur écran tactile, à tester soit avec un peu de persévérance avec l’inspecteur de Chrome, soit via votre mobile, tablette… le « touch » fait apparaitre l’image quelques millisecondes avant d’aller sur le lien (il faut trouver une solution) ;
- le poids des images (très très léger sur le codepen) pourrait rendre l’effet moins élégant (ex : un ou plusieurs survols ne marchent pas tout de suite).
Il est possible de rendre l’expérience plus fluide en ajoutant une couche de JavaScript, d’Ajax et de « Loading », mais avec un coût plus important et des performances moindres.