Enfin! Le moment tant attendu est arrivé: votre client vous a donné son « go » pour mettre en ligne son site. Problème: la plupart les pages contiennent du Lorem Ipsum. Pire: elles ne sont même pas encore créées et la plupart des liens du menu pointent sur #. Voici comment prévenir les internautes avant qu’ils cliquent, pour ne pas les frustrer.
Proposer un simple indicateur visuel
Keep it Simple, Stupid. L’internaute doit savoir au premier coup d’œil qu’un clic sur le lien ne le mènera nulle part. Un p’tit sélecteur CSS et hop.
a[href="#"] {
color: #BBB;
text-decoration: line-through;
}indication au rollover: méthode CSS
Pas besoin de 10 lignes d’explications, voilà:
a[href="#"]:hover:before {
content: 'page en construction.';
display: inline-block;
position: absolute;
font-size: 12px;
text-decoration: none;
color: #FFF;
padding: 2px 5px;
background-color: red;
margin-top: -20px;
opacity: .8;
}méthode Bootstrap: tooltip.js
Si vous souhaitez avoir quelque chose de plus propre, et que vous avez Bootstrap de chargé, il suffit juste d’un peu de JS:
$('a[href="#"]').tooltip({
title: 'page en construction'
});
Voici le rendu des 2 méthodes ci-dessus (sur codepen) :
See the Pen Disabled link indicator by Benjamin PONGY (@redpik) on CodePen.