Bij het bouwen van webpagina’s wil je soms dat een ankerlink (<a>) zichtbaar is, maar niet werkt. Misschien is dat deel van de site nog in aanbouw, of is de link alleen decoratief. Wat de reden ook is: een anker niet klikbaar maken is eenvoudig met een paar CSS-regels.
Het codesnippet
We beginnen met een kort snippet dat een ankertag niet klikbaar maakt:
<a href="#" class="inactive-link">Unclickable Link</a>
Voeg daarna in je CSS de volgende stijlen toe:
.inactive-link {
pointer-events: none;
cursor: default;
}
Een gebruiksvoorbeeld
Stel dat je een navigatiemenu hebt, maar één van de pagina’s nog in aanbouw is. Je wilt de link zichtbaar houden voor een consistent ontwerp, maar bezoekers moeten er niet op kunnen klikken. Hier is een voorbeeld:
<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>
Conclusie
Met slechts een paar regels CSS kun je elk ankertag niet klikbaar maken. Het is een snelle, effectieve manier om inactieve of tijdelijke links te beheren. Probeer deze techniek de volgende keer dat een link zichtbaar moet zijn, maar niets mag doen.