En construisant des pages web, vous pouvez vouloir qu’un lien d’ancre (<a>) reste visible sans être fonctionnel. Peut-être que cette section du site est encore en travaux, ou que le lien n’est là que pour le décor. Quelle qu’en soit la raison, rendre une ancre non cliquable se fait simplement avec quelques règles CSS.
L’extrait de code
Commençons par un extrait rapide qui rend une balise d’ancre non cliquable :
<a href="#" class="inactive-link">Unclickable Link</a>
Ensuite, dans votre CSS, ajoutez les styles suivants :
.inactive-link {
pointer-events: none;
cursor: default;
}
Un cas d’usage
Imaginons un menu de navigation dont l’une des pages est en construction. Vous voulez que le lien reste visible pour la cohérence du design, sans que les visiteurs puissent interagir avec. Voici un exemple :
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
</ul>
</nav>
Conclusion
Avec seulement quelques lignes de CSS, vous pouvez rendre n’importe quelle ancre non cliquable. C’est un moyen rapide et efficace de gérer des liens inactifs ou provisoires. Essayez cette technique la prochaine fois que vous aurez besoin d’un lien visible, mais sans fonction.