Se estiveres a criar página por página, podes utilizar essa vantagem para fazer isso.
Por exemplo, imaginemos que temos 2 páginas: index.html
e sobre.html
, e queremos destacar o link da página atual conforme navegamos de uma para a outra.
Bom, primeiro vamos criar uma class responsável pelo estilo CSS para este link em destaque:
.paginaAtual {
color:#fff;
background-color:#71953E;
}
Então agora iremos fazer o seguinte - Na página index.html os links de navegação irão ser criados da seguinte maneira:
<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>
Enquanto na página sobre.html os links serão criados assim:
<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>
Caso o exemplo acima não seja uma opção, eis uma alternativa para isto:
Nesta segunda opção, iremos utilizar JavaScript, mais precisamente a biblioteca jQuery. Para utilizarmos a biblioteca jQuery caso não estejas familiarizado com ela, precisamos de a implementar no <head>
do nosso documento/website usando a seguinte linha de código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Esta linha de código acima irá implementar a biblioteca jQuery hospedada pela Google, mas também poderia ser hospedada por ti no teu servidor. Depois então iremos criar o nosso menu:
<div id="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");
Esta linha de código Javascript acima necessita de ser implementada dentro da tag
<script></script>
no teu documento.