3 Ways to Highlight Links to the Current Page with CSS

We suggest looking at 3 different ways to highlight links to the current page using CSS.

The first way – HTML/CSS

I noticed that WordPress automatically adds a class for the active clicked link.  You can see this if you open the source code of the site.

In the source code you can see that the class “current-menu-item” has been added to the active link. This means that we can add any style to this class.

Пример:

Open the CSS file of the template and enter this code:

#menu li .current-menu-item a{color:#сс0000;}

Note: This code will work if your menu has been taken in a block like mine:

<div id="menu">your menu (I displayed the menu via a widget)</div>

I will now share how to highlight an active link for absolutely any site using just a little JavaScript and CSS code.

2 ways on Java Script / CSS

I want to offer you ready-made code in JavaScript, which will automatically prescribe the class ” act” to the active menu link that links to the current page. This code is easily embedded in any design, template and any CMS (Joomla, WordPress, etc.).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="https://www.w3.org/1999/xhtml">
<head><title></title></head>
<body> 
<style ENGINE="text/css">
body{font: 14px/normal Verdana,sans-serif;}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
</style><div id="msgText">
<a href="1.html">Link1</a>
<a href="2.html">Link2</a></div>
<scripttype="text/javascript">
try{
var el=document.getElementById('msgText').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' act';}
;}
;}
catch(e){}</script>
</body>
</html>

Note paragraph 5 to 10 in the code.

<style type="text/css">body{font: 14px/normalVerdana,sans-serif;}a{text-decoration:none;color:#999;}a:hover{color:#666;}a.act{color:#F00;}</style>

Here you change the appearance of the menu, using the knowledge of CSS.

There is another way of solving this problem, also using JavaScript.

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i

Whichever way you prefer, that’s your choice.

Share