If you're creating page by page, you can use this advantage to do this.
For example, let's say we have 2 pages: index.html and sobre.html , and we want to highlight the link of the current page as we navigate from one to the other.
Well, first let's create a class responsible for CSS style for this featured link:
.paginaAtual {
color:#fff;
background-color:#71953E;
}
So now we will do the following - In the index.html page the navigation links will be created as follows:
<div id="menu">
<ul>
<li class="linkMenu paginaAtual"><a href="index.html">Index page</a></li>
<li class="linkMenu"><a href="sobre.html">Sobre</a></li>
</ul>
</div>
While on the about.html page, links will be created like this:
<div id="menu">
<ul>
<li class="linkMenu"><a href="index.html">Index page</a></li>
<li class="linkMenu paginaAtual"><a href="sobre.html">Sobre</a></li>
</ul>
</div>
If the above example is not an option, here is an alternative to this:
In this second option, we will use JavaScript, more precisely the jQuery library. To use the jQuery library if you are not familiar with it, we need to implement it in <head> of our document / website using the following line of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
ThislineofcodeabovewillimplementthejQuerylibraryhostedbyGoogle,butcouldalsobehostedbyyouonyourserver.Afterthatwewillcreateourmenu:
<divid="menu">
<ul>
<li class="linkMenu"><a href="index.html">Index page</a></li>
<li class="linkMenu"><a href="sobre.html">Sobre</a></li>
</ul>
</div>
$("a[href*='" + location.pathname + "']").addClass("paginaAtual");
This line of Javascript code above needs to be implemented within the tag
<script></script> in your document.
